Changing Mouse Cursor

[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 ?

[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>

[jbennet]

you can set it in your CSS too

[~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>

[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 ?

[~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.

[ChelseaBoy]

Possibly a typo, I think it should read:

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

[~s.o.s~]

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

[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.

[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