make tag hover change mouse style

Question

Possible Duplicate:
Make mouse pointer a hand when hover over <li> element?

Basically, I am using a javascript library that makes tables sortable by clicking on the table head. I have had no experience with javascript myself.The only problem is, clicking on the table is not the most intuitive thing to do. Therefore, I want to make it look like a link. I have made it underlined, but it is still not particularly obvious because when you hover over it, the mouse does not change how it looks. I would like to change the mouse image to the hand that you get when you hover over a link. Currently, the ones which I want to look like links are just a blank (no href). Is there any way to easily do this, would it involve javascript, and does anyone know how?

Actually, if you have `` tags, the simple solution is to add the href attribute. Either `` or `` and block the default link action. — JJJ, Jul 14 '12 at 08:50

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

The issue is indeed solvable by using javascript but instead you should turn to the power of CSS.

If the element you are actually wanting to make on hover change cursor is indeed a <a> you are better off adding the attribute href with a value of "#" to make the browser handle the cursor change automatically.

<a href="#">I'm a real link, but pressing me won't lead to another webpage</a>

Example snippet (using CSS)

<html>
  <head>

    <style>
      th:hover {
        cursor:pointer;
      }   
    </style>

  </head>
  <body>

    <table border="1">
      <tr> <th>Header 1</th> <!-- --> <th>Header 2</th> </tr>
      <tr> <td>value 1 </td> <!-- --> <td>value 2 </td> </tr>
    </table>

  </body>
</html>

^{jsFiddle Live Example}

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 14 '12 at 08:46

Filip Roséen - refp

62,493
20
150
196

3

it should be cursor:pointer, there is no such thing as hand in CSS – Akash Kava Jul 14 '12 at 08:47
@AkashKava thanks, snippet fixed. – Filip Roséen - refp Jul 14 '12 at 08:47
Its strange, pointer should be an arrow and hand should be for hand, but WWC is like government, they hardly listen to people. – Akash Kava Jul 14 '12 at 08:48
Hand works for some vintage IE version, 6 I believe. – zrooda Jul 14 '12 at 08:50
Thanks :). I was really looking for something that used either CSS or HTML. – matts1 Jul 14 '12 at 11:58

score 1 · Answer 2 · answered Jul 14 '12 at 10:13

Using CSS add this:

a {
      cursor: pointer;
}

You could also consider using a hover effect.

Having thought about it some more, you must be using the a tag incorrectly. href is always required and should never be left blank therefore use <a href="#">link</a>. Which will solve your problem.

make tag hover change mouse style

2 Answers2

Example snippet (using CSS)