Как при наведении курсора на пункт меню менять только его фон?

Question

[sunnyrio]

Есть вот такой код jQuery (в самом внизу кода исполняемого документа):

$('.submenusty').hover(function () {$('.submenusty').css('background-color', '#f0f2f5');},function() {$('.submenusty').css('background-color', 'white');});

При наведении на пункт меню подсвечивается весь класс, как сделать чтобы подсвечивался только пункт меню на котором наведен курсор?

<div id="menu" class="ui_rmenu">
	<div id="rmenu_zero" class="ui_rmenu_zero"></div>
	<div id="menu1" class="submenusty">
		<a onclick="hide(1); pickmenu(1);">Menu1</a>
	</div>
	<div id="submenu1">
		<div id="menu11" class="submenusty"><a onclick="pickmenu(11); loadtask();">&nbsp;Menu_11</a></div>
		<div id="menu12" class="submenusty"><a onclick="pickmenu(12);">&nbsp;Menu_12</a></div>
		<div id="menu13" class="submenusty"><a onclick="pickmenu(13);">&nbsp;Menu_13</a></div>
	</div>
	<div id="menu2" class="submenusty">
		<a onclick="hide(2); pickmenu(2);">Menu2</a>
	</div>
	<div id="submenu2">
		<div id="menu21" class="submenusty"><a onclick="pickmenu(21);">&nbsp;Menu_21</a></div>
		<div id="menu22" class="submenusty"><a onclick="pickmenu(22);">&nbsp;Menu_22</a></div>
		<div id="menu23" class="submenusty"><a onclick="pickmenu(23);">&nbsp;Menu_23</a></div>
	</div>
	<div id="menu3" class="submenusty">
		<a onclick="hide(3); pickmenu(3);">Menu3</a>
	</div>
	<div id="submenu3">
		<div id="menu31" class="submenusty"><a onclick="pickmenu(31);">&nbsp;Menu_31</a></div>
		<div id="menu32" class="submenusty"><a onclick="pickmenu(32);">&nbsp;Menu_32</a></div>
		<div id="menu33" class="submenusty"><a onclick="pickmenu(33);">&nbsp;Menu_33</a></div>
	</div>
	<div id="rmenu_zero" class="ui_rmenu_zero"></div>
</div>
<div id="wintask" class="walltask"></div>
<script>
$('.submenusty').hover(function () {$('.submenusty').css('background-color', '#f0f2f5');},function() {$('.submenusty').css('background-color', 'white');});
</script>

Answer 1

[Ilaj Osmanov]

Используй указатель this.

Comments

[sunnyrio]

как его добавить к submenusty ?

Answer 2

[Егор Живагин]

$('.submenusty').hover(function () {
    $(this).css('background-color', '#f0f2f5');
},
function() {
    $(this).css('background-color', 'white');
});

Я не знаю, зачем ты одному и тому же объекту два фоновых цвета задаёшь, но это меня не касается)) Принцип понятен?
И, пожалуйста, расставляй отступы

Comments

[sunnyrio]

а как сделать чтобы цвет запомнился и потом вернулся обратно после того как курсор уйдет в сторону?

[Егор Живагин]

sunnyrio: я ответил тебе во втором вопросе твоём) CSS. Псевдокласс :hover . Две строчки и голова не болит

[sunnyrio]

Егор Живагин: дело в том что цвет выбранного пункта пропадает после щелчка мыши когда заново наводишь курсор на этот пункт меню

Answer 3

[sunnyrio]

а как сделать чтобы цвет запомнился и потом вернулся обратно после того как курсор уйдет в сторону?

Comments

[alvvi]

Но ведь это повеедние по умолчанию, когда курсор уходит, возвращается изначальный цвет заданный CSS свойством. Уберите манипуляции с hover из JS и добавьте псевдо-класс :hover с нужным свойством и все должно работать.
Если вы хотите, чтобы цвет после ховера оставался на элементе, то можно, как вариант, на эвент ховера с помощью JS или jQuery добавлять класс submenusty--hovered с нужным свойством.