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 <lpasseb@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>
No comments:
Post a Comment