Mouse Over Only On Text Not On Entire Row

How can I provide Mouse hover effect only on text not on entire row. I tried with Position(), But cam out with empty .Below is fiddle link,

• Task1<

Solution 1:

Your li elements can't be block-display. There are a lot of ways to handle it, but one easy way is just to wrap them with spans and trigger the .hover on those spans:

<li><span>Task1</span></li>
...
$('ul#ulid li span').hover(function() {

http://jsfiddle.net/xneG5/

Programatically: http://jsfiddle.net/xneG5/2/

CSS only: http://jsfiddle.net/xneG5/3/

Solution 2:

Setting the margins and padding of the li elements to 0 could possibly solve this problem. The reason it is triggering the entire row is because li comes with default margins and padding.