Show a "Finger" on
hover like its an

Question

i have a realy stupid problem -.- following:

<ul id="selectable" data-bind="foreach: folders">
  <li>
    <a href="#" data-bind=" text: $data, click: $root.goToFolder"></a>
  </li>
</ul>

its KnockoutJS combined with a bit of SammyJS... atm you see i got a 'a' inside of the 'li'... so that there will appear this "finger" on the mousehover... but if i remove the 'a', ofc the "finger" wont be shown. instead it will appear this (lets call it) text-editor cursor... but its not obviously to the user that he is able to klick this element... is there a way to show this "finger" like on a link hover?

in this example they have also

<ul><li>Item</li></ul>

and it shows this "finger"

possible duplicate of [Change the mouse cursor on mouser over to anchor-like style](http://stackoverflow.com/questions/7185044/change-the-mouse-cursor-on-mouser-over-to-anchor-like-style) — jbabey, Jul 11 '13 at 14:18

score 10 · Accepted Answer · answered Jul 11 '13 at 14:17

10

I'd suggest:

li {
    cursor: pointer;
}

References:

cursor.

answered Jul 11 '13 at 14:17

David Thomas

249,100
51
377
410

Praveen · Answer 2 · 2013-07-11T19:33:24.897

2

Add cursor: pointer to li.

li {
    cursor: pointer;
}

check css-tricks for information.

edited Jul 11 '13 at 19:33

answered Jul 11 '13 at 14:18

Praveen

55,303
33
133
164

5

Check w3fools.com I suggest the MDN – Wottensprels Jul 11 '13 at 14:18
@ Sprottenwels any reason? – Praveen Jul 11 '13 at 14:21
1

Also: it's [W3Schools](http://www.w3schools.com/), *not* 'W3CSchools'. Not that the implied connection to the W3 is any more justified with the omission of the 'C'. – David Thomas Jul 11 '13 at 14:22
@user1671639 "Bad education hurts.". Check the "reasons" section – Wottensprels Jul 11 '13 at 14:24
@DavidThomas Sorry. I've changed it. Thanks for pointing the mistake. – Praveen Jul 11 '13 at 14:26
@Sprottenwels Oh. So I will avoid w3schools for reference. – Praveen Jul 11 '13 at 14:38

score 0 · Answer 3 · answered Jul 11 '13 at 14:18

0

What about...

li:hover {
    cursor: pointer;
}

answered Jul 11 '13 at 14:18

Dan Lister

2,543
1
21
36

1

Actually, that pseudo selector is unnecessary – Wottensprels Jul 11 '13 at 14:27

score 0 · Answer 4 · answered Jul 11 '13 at 14:22

0

Following CSS will take care of this:

li { cursor: hand; cursor: pointer; }

answered Jul 11 '13 at 14:22

Pankaj

27
7

1

I am pretty sure that 'hand' is not a valid property https://developer.mozilla.org/en-US/docs/Web/CSS/cursor Even if it was, it would be overridden by the second one, therefore, this makes no sense – Wottensprels Jul 11 '13 at 14:32
1

IE 5.0 and 5.5 only supported hand. Since IE 6 and 7 support pointer, it is not necessary to use hand but it is nice to have cross browser support. – Pankaj Jul 11 '13 at 19:27

Show a "Finger" on hover like its an

4 Answers4

Show a "Finger" on
hover like its an