html - Why hover is not working in JQuery -
i'm trying follow demo web application somehow don't obtain results get.
i text changes colour when mouse over. here have done until now.
html code looks like:
<body> <div id="menu"> <ul> <a href="#"><li>aaa</li></a> <a href="#"><li>bbb</li></a> <a href="#"><li>ccc</li></a> <a href="#"><li>ddd</li></a> </ul> </div> </body>
my jquery code:
$(function(){ $('li').hover(function(){ $(this).addclass('highlight'); }, function(){ $(this).removeclass('highlight'); }); });
my css code:
.highlight{ color:green; }
any idea?
my fiddle.
the issue because html invalid - a
element must inside li
:
<ul> <li><a href="#">aaa</a></li> <li><a href="#">bbb</a></li> <li><a href="#">ccc</a></li> <li><a href="#">ddd</a></li> </ul>
$('li a').hover(function () { $(this).addclass('highlight'); }, function () { $(this).removeclass('highlight'); });
note fiddle did not include jquery, , can shorten code using toggleclass()
:
$('li a').hover(function () { $(this).toggleclass('highlight'); });
Comments
Post a Comment