$(function() {
var list_item = $("li");
var current = -1;
list_item.hover(function() {
var index = list_item.index($(this));
if(index != current) {
$("a", list_item.eq(index)).css({backgroundColor:'#ccc'});
index = current;
}
}, function() {
$("a", list_item.eq(current).css({ backgroundColor:"#FFF"});
});}); On Sat, Nov 28, 2009 at 7:12 PM, LPA <lpas...@gmail.com> wrote: > Hi, > > I have this code which change color of the background of the li when > the mouse enter or leave. I'd like to change the color of the first > <a> of the <li> selected. > > Thanx for your help > > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> > <head> > <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ > jquery.min.js"></script> > <title>Sandbox</title> > <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> > <style type="text/css" media="screen"> > body { background-color: #000; font: 26px Helvetica, Arial; color: > #fff; } > .menu_on {background-color: yellow;} > </style> > > <script type="text/javascript"> > $(document).ready(function(){ > $("li.long").mouseenter(function() { > $(this).addClass("menu_on"); > }); > > $("li.long").mouseleave(function() { > $(this).removeClass("menu_on"); > }); > }); > > </script> > > </head> > <body> > <ul id="menu"> > <li class="long"> > <a href="#">menu 1</a> > <div class="lignes"> > <ul> > <li>Line</li> > <li>Line</li> > <li>Line</li> > <li>Line</li> > <li>Line</li> > </ul> > </div> > </li> > > <li class="long"> > <a href="#">menu 2</a> > <div class="lignes"> > <ul> > <li>Line</li> > <li>Line</li> > <li>Line</li> > <li>Line</li> > <li>Line</li> > </ul> > </div> > </li> > > </ul> > </body> > </html> >
