jquery - List Hover Problem -
i've asked question, think din't explain problem enough. here go again:
http://i54.tinypic.com/1zp4kev.png
i've got list. default background color shown in picture above. want make item 4 background change color #ededed when hovered upon. item 4. item 3, item 2 should remain original background color.
how do that? problem has been when hover on item 4, parent items background color changed #ededed also. jquery or css solution appreciated.
here's code list above:
<ul> <li class='comment'> <div class='comment-body'> item 2 </div><abbr class='timestamp' title='2011-02-18 11:39:32'>2011-02-18 11:39:32</abbr> <div class='aut'> anonymous </div><a href='#comment_form' class='reply' id='2' name="2">reply</a> <ul id='comments-ul'> <li class='comment'> <div class='comment-body'> item 3 </div><abbr class='timestamp' title='2011-02-18 11:40:07'>2011-02-18 11:40:07</abbr> <div class='aut'> anonymous </div><a href='#comment_form' class='reply' id='3' name="3">reply</a> <ul id='comments-ul'> <li class='comment'> <div class='comment-body'> item 4 </div><abbr class='timestamp' title='2011-02-18 11:40:12'>2011-02-18 11:40:12</abbr> <div class='aut'> anonymous </div><a href='#comment_form' class='reply' id='4' name="4">reply</a> </li> </ul> </li> </ul> </li> <li class='comment'> <div class='comment-body'> item 1 </div><abbr class='timestamp' title='2011-02-18 11:39:28'>2011-02-18 11:39:28</abbr> <div class='aut'> anonymous </div><a href='#comment_form' class='reply' id='1' name="1">reply</a> </li> </ul>
here go:
$('li:not(:has(li))').hover( function() { $(this).css({'background': '#ededed'}); }, function() { $(this).css({'background': 'none'}); } );
Comments
Post a Comment