how to remove divider (as <A> background img) in UL LI
Hi there, I am really new in jQuery. I need help with this problem:
I have horizontal CSS UL LI menu like :
-
<div id="mainSubNav" class="overout">
<ul>
<li><a href="#"><span>Flights</span></a>
<ul>
<li><a href="#">Submenu level A</a></li>
<li><a href="#">Submenu level B</a></li>
<li><a href="#">Submenu level C</a></li>
<li><a class="bgNone" href="#">Submenu level D</a></li>
</ul>
</li>
<li"><a href="#"><span>Something</span></a>
<ul>
<li><a href="#">Submenu level A</a></li>
<li><a href="#">Submenu level B</a></li>
<li><a href="#">Submenu level C</a></li>
<li><a class="bgNone" href="#">Submenu level D</a></li>
</ul>
</li>
.
.
.
</ul>
</div>
so, it is horizontal menu and between each LI element is inserted some image DIVIDER. I define this divider as a background image for element <a href="#"> like this :
-
#mainSubNav ul li a { display:block; padding:3px 14px 3px 14px; margin:0px; color:#cb160f; font-size:0.9em; font-weight:bold; text-decoration:none; background:url(../Img/dividerSub.gif) no-repeat right center; }
as u can see, the divider is inserted to the right side of A element and I need to remove this divider every time I "mouse-over" the next LI element...
it means, when I mouseover (hover) this
<li"><a href="#"><span>Something</span></a> element, I need to remove divider which is on the right side of the previous one
<li><a href="#"><span>Flights</span></a> ...
i am trying with jQuery something like this:
-
$(document).ready(function(){
$("#mainSubNav.overout").mouseover(function(){
$("#mainSubNav ul > li a:eq(10)").addClass("bgNone2");
}).mouseout(function(){
$("#mainSubNav ul li a").removeClass("bgNone2");
});
});
but this remove (by adding the bgNone2 class) only the divider in LI A element indexed as 10... i try to use variables, but without any results..
pleas, can u help me!!
THANKS A LOT