Need some help assigning a mouseover event to display some icons that start out hidden.
For every <li> in the ul, I have icons. When the user mouses over the <li> I want the span tag with a class called "icons" to be displayed. When the
mouse out event occurs remove the class and/or just hide the span. The problem for me is how to assign event so just the span tag and its contents appear and disapear when the
mouse hovers over the <li>.
Heres the HTML:
<ul id="nav">
<li>Cat 1
<span class="icons">
<div>stuff here</div>
</span>
</li>
<li>Cat 2
<span class="icons">
<div>stuff here</div>
</span>
<ul>
<li>Sub Cat 2A
<span class="icons">
<div>2A stuff here</div>
</span>
</li>
</ul>
</li>
</ul>
Heres my jquery code.
$('#nav li').each(function(){
//Add Background Shading o Mouseover to all Rows in the menu
$(this).mouseover(function(){
$(this).addClass("background_grey").removeClass("icons");
})
$(this).mouseout(function(){
$(this).removeClass("background_grey").addClass("icons");
});
});
Thanks for the help.
