Изменение фона толького li на какое наведено

[A.N.R.I]

Если у ul.tree li:hover менять фон, то, например, если навести на 3 уровень, то и 2, и 1 уровень тоже фон поменяют. Как сделать, если наводишь на li 3 третьего уровня, то меняет фон лишь наведен li

<style>
ul.tree li {
	background:url(../img/left_menu.jpg) repeat-x;
}
</style>



<ul class="tree dynamized" style="display: block; "><li>
	<span class="grower CLOSE"> </span>
	<a href="" title="">1 level</a>
		<ul style=" ">
			<li>
				<a href="" title="">2 level </a>
			</li>						
																			
		</ul>
	</li>													
	<li>
		<span class="grower CLOSE"> </span>
		<a href="" title="">1 level</a>
		<ul style=" ">
			<li>
				<span class="grower OPEN"> </span>
				<a href="" title="">2 level</a>
				<ul style="display: block; ">
					<li>
						<a href="" class="selected" title="">3 level</a>
					</li>						
					<li class="last">
						<a href="" title="">3 level</a>
					</li>						
				</ul>
			</li>						
																	
		</ul>
	</li>						
</ul>

[vadim5june]

можно использовать mouseover и mouseout

[SkyLight]

Оберните содержимое ваших li (только содержимое, без подменю) в какой-нибудь div и меняйте фон у него, т.е. li:hover div{background: red;}

[Deff]

A.N.R.I,
мон использовать указания на родсвенность
ul.tree > li:hover{
фон1
}
ul.tree > li > ul > li{
фон2
}
ul.tree > li > ul > li:hover{
фон3
}

[A.N.R.I]

можно использовать mouseover и mouseout

Сделал так:

$(' ul.tree li ').mouseover(function(){
			$(this).css("background","#333333");
		});
		$(' ul.tree li ').mouseout(function(){
			$(this).css("background","#f7f7f7");
		});

Все равно захватывает li, который не нужно трогать

[Deff]

A.N.R.I,

$(' ul.tree > li > ul> li ').mouseover(function(){
			$(this).css("background","#333333");
		});
		$(' ul.tree li ').mouseout(function(){
			$(this).css("background","#f7f7f7");
});

Или так:

$(' ul.tree li:not(.over) ').mouseover(function(){
                                  $(this).parents('li').addClass('over')
			$(this).css("background","#333333");
		});
                                  $(this).parents('li').removeClass('over')
		$(' ul.tree li ').mouseout(function(){
			$(this).css("background","#f7f7f7");
});

[A.N.R.I]

$(' ul.tree > li > ul> li ').mouseover(function(){
			$(this).css("background","#333333");
		});
		$(' ul.tree li ').mouseout(function(){
			$(this).css("background","#f7f7f7");
});

Не, то ли я тупой, то ли лыжи не едут. Хоть убей. Или я неверно делаю или код не совсем робочий(

[A.N.R.I]

Я еще думал, мужет когда наводишь, то у всех родителей заменить фон? Я сделал, но что-то не получается

$('div#categories_block_left ul.tree li').mouseover(function(){
			$(this).css("background","black");
			$(this).parent('li').css("background","gray");
		});

[Deff]

A.N.R.I,
Так ?

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

<style type="text/css">
ul.tree li{
 background-color:#F7F7F7;
}
ul.tree li.over{
 background-color:#6CE26C;
}
ul.tree li:not(.over){
 background-color:#F7F7F7;
}
</style>


<script type="text/javascript">
$(document).ready(function(){

    $(" ul.tree li").mouseover(function(){
		if(!$(this).find('li.over').length){$(this).addClass('over')};
    }).mouseout(function(){
		$(this).removeClass('over');
    });

});
</script>


<ul class="tree dynamized" style="display: block; "><li>
	<span class="grower CLOSE"> </span>
	<a href="" title="">1 level</a>
		<ul style=" ">
			<li>
				<a href="" title="">2 level </a>
			</li>						
																			
		</ul>
	</li>													
	<li>
		<span class="grower CLOSE"> </span>
		<a href="" title="">1 level</a>
		<ul style=" ">
			<li>
				<span class="grower OPEN"> </span>
				<a href="" title="">2 level</a>
				<ul style="display: block; ">
					<li>
						<a href="" class="selected" title="">3 level</a>
					</li>						
					<li class="last">
						<a href="" title="">3 level</a>
					</li>						
				</ul>
			</li>						
																	
		</ul>
	</li>						
</ul>

[A.N.R.I]

Да, так. Очень большое спасибо