Member Avatar for aparnesh

How can I change the mouse cursor ? In certain cases, I am displaying the links without the underlines etc. When the mouse pointer is over such links (onMouseOver), I would prefer to change the cursor from the arrow to a hand.

How can I acheive that ?

  • 5 Contributors
  • 9 Replies
  • 201 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by aparnesh
Member Avatar for ChelseaBoy

It depends on how you define the link, if you are using style sheets etc, but assuming it is of the form:

<a href="www.abc.com">abc</a>

then try:

<a href="www.abc.com" style="cursor:hand">abc</a>

Member Avatar for jbennet

you can set it in your CSS too

Member Avatar for ~s.o.s~

> <a href="www.abc.com" style="cursor:hand">abc</a>
That would be IE only. It won't work on Mozilla based browsers.

To make you code cross browser compatible, you need to do: <a href="_blank" style="cursor: hand; cursor: pointer;">Linky</a>

Member Avatar for aparnesh

Thanks for the help. But I am not getting why
<a href="_blank" ... >
instead of
<a href="www.abc.com" ... > . What is the significance ?

Member Avatar for ~s.o.s~

That was a typo. It should actually be target = "_blank" . We normally use that when we want the link to open up in a new tab / window.

Try out:

<a href="http://www.google.com">Google</a>

<!-- and now try this -->

<a href="http://www.google.com" target="_blank">Google</a>

Try it out and see the difference.

Member Avatar for ChelseaBoy

Possibly a typo, I think it should read:

<a href="www.abc.com" target="_blank" style="cursor: hand; cursor: pointer;">ABC</a>

Member Avatar for ~s.o.s~

ChelseaBoy, consider using code tags to present your code and snippets. It makes them look neat and clean. Read this.

Member Avatar for MattEvans

Instead of using CSS + JS + etc to make fake links without an underline; why not consider using different classes of link with different styles? You can avoid using JS entirely that way. (A)nchor is the only element that can have a CSS :hover pseudoclass in IE <= 6, but with CSS, you can make individual links look however you want; and make them a bit 'interactive' using CSS :hover/:visited/:link styles....

To disable underline for example:

a.myspeciallink{
text-decoration:none;
}

Then make links like this:

<a class="myspeciallink" href="http://example.tld">I have no underline!</a>

Other CSS can be applied also; you can make <a>s block level (with display:block; and then give them a fixed size and background color/image (which can change using CSS :hover), put img tags inside them, and so on, and so forth.

commented: Good point, I missed that one. +21
Member Avatar for aparnesh

Thanks ~S.O.S~ and MattEvans for your help and suggestions. I am relatively new to CSS so often not sure which is the best solution. Thanks for guiding me

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.