[Jquery] Изменение класса при наведении

alexz15

alexz15

Постоялец
Регистрация
3 Окт 2008
Сообщения
394
Реакции
194
Есть такой код:
HTML: 
<td class="men_l"></td>
<td class="men_c"><div class="menutxt"><a href="/news">Новости</a></div></td>
<td class="men_r">&nbsp;</td>
в итоге получается кнопка:
knopka.jpg
как можно сделать чтобы при наведении на кнопку, менялись классы:
HTML: 
<td class="men_la"></td>
<td class="men_ca"><div class="menutxt"><a href="/news">Новости</a></div></td>
<td class="men_ra">&nbsp;</td>
 
Где именно необходимо менять классы?
 
HTML: 
<html>
<style>
.bold {font-weight: bold;}
</style>
<table>
<tr>
<td class="men_l">Hello</td>
<td class="men_c"><div class="nobold" id="changediv" onMouseOver="document.getElementById('changediv').className='bold';return true;" onMouseOut="document.getElementById('changediv').className='nobold';return true;"><a href="/news">Новости</a></div></td>
<td class="men_r">&nbsp;</td>
</tr>
</table>
 
в этом коде получается растягивающаяся под текст кнопка. нужно чтобы при на ее наведении менялись сразу 3 класса:

men_l
men_c
men_r

на

men_la
men_ca
men_ra
 
Ужасно сложно вынести код смены класса в процедуру, и сделать в ней цикл по 3м элементам :) ТС, если такое не осиливаешь - это скорее в коммерческий раздел.
 
А почему нельзя например не менять класс, а добавлять?
Если использовать jQuery
HTML: 
<td class="men_l activ"></td>
<td class="men_c activ"><div class="menutxt"><a href="/news" onmouseover="$(this).parents('.men_c').addClass='activ';$(this).parents('.men_c').prev().addClass('activ');$(this).parents('.men_c').next().addClass('activ');" onmouseout="$(this).parents('.men_c').removeClass='activ';$(this).parents('.men_c').prev().removeClass('activ');$(this).parents('.men_c').next().removeClass('activ')">Новости</a></div></td>
<td class="men_r activ">&nbsp;</td>
 
МихалычЪ написал(а):
А почему нельзя например не менять класс, а добавлять?
Если использовать jQuery
HTML: 
<td class="men_l activ"></td>
<td class="men_c activ"><div class="menutxt"><a href="/news" onmouseover="$(this).parents('.men_c').addClass='activ';$(this).parents('.men_c').prev().addClass('activ');$(this).parents('.men_c').next().addClass('activ');" onmouseout="$(this).parents('.men_c').removeClass='activ';$(this).parents('.men_c').prev().removeClass('activ');$(this).parents('.men_c').next().removeClass('activ')">Новости</a></div></td>
<td class="men_r activ">&nbsp;</td>
Нажмите для раскрытия...
Спасибо! Что-то подобное уже получается )
я делаю так:
HTML: 
<td class="men_l"></td>
<td class="men_c"><div class="menutxt"><a href="/news" onmouseover="$(this).parents('.men_c').addClass='men_ca';$(this).parents('.men_c').prev().addClass('men_la');$(this).parents('.men_c').next().addClass('men_ra');" onmouseout="$(this).parents('.men_c').removeClass='men_ca';$(this).parents('.men_c').prev().removeClass('men_la');$(this).parents('.men_c').next().removeClass('men_ra')">Новости</a></div></td>
<td class="men_r">&nbsp;</td>
все классы добавляются/убираются кроме men_c - не изменяется стиль при наведении. Что не так делаю?
стили:
Код: 
.men_c{ height:29px; background-image:url(mcenter_notact.png); background-repeat:repeat-x;}

.men_ca{ height:29px; background-image:url(mcenter.png); background-repeat:repeat-x;}
 
В firebug посмотри, меняется класс или нет
 
У тебя ошибка в коде
Код: 
$(this).parents('.men_c').addClass='men_ca'
должно быть
Код: 
$(this).parents('.men_c').addClass('men_ca')
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху