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

Тема в разделе "Другие языки", создана пользователем alexz15, 7 сен 2011.

Модераторы: Цукер
  1. alexz15

    alexz15

    Регистр.:
    3 окт 2008
    Сообщения:
    394
    Симпатии:
    191
    Есть такой код:
    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>
     
  2. МихалычЪ

    МихалычЪ Создатель

    Регистр.:
    1 сен 2009
    Сообщения:
    38
    Симпатии:
    7
    Где именно необходимо менять классы?
     
  3. jami

    jami Постоялец

    Регистр.:
    10 авг 2011
    Сообщения:
    114
    Симпатии:
    39
    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>
    
    
     
  4. alexz15

    alexz15

    Регистр.:
    3 окт 2008
    Сообщения:
    394
    Симпатии:
    191
    в этом коде получается растягивающаяся под текст кнопка. нужно чтобы при на ее наведении менялись сразу 3 класса:

    men_l
    men_c
    men_r


    на

    men_la
    men_ca
    men_ra
     
  5. jami

    jami Постоялец

    Регистр.:
    10 авг 2011
    Сообщения:
    114
    Симпатии:
    39
    Ужасно сложно вынести код смены класса в процедуру, и сделать в ней цикл по 3м элементам :) ТС, если такое не осиливаешь - это скорее в коммерческий раздел.
     
  6. МихалычЪ

    МихалычЪ Создатель

    Регистр.:
    1 сен 2009
    Сообщения:
    38
    Симпатии:
    7
    А почему нельзя например не менять класс, а добавлять?
    Если использовать 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>
    
     
    alexz15 нравится это.
  7. alexz15

    alexz15

    Регистр.:
    3 окт 2008
    Сообщения:
    394
    Симпатии:
    191
    Спасибо! Что-то подобное уже получается )
    я делаю так:
    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;}
     
  8. МихалычЪ

    МихалычЪ Создатель

    Регистр.:
    1 сен 2009
    Сообщения:
    38
    Симпатии:
    7
    В firebug посмотри, меняется класс или нет
     
  9. alexz15

    alexz15

    Регистр.:
    3 окт 2008
    Сообщения:
    394
    Симпатии:
    191
    не меняется. два меняются (добавляются), а men_c нет.
     
  10. МихалычЪ

    МихалычЪ Создатель

    Регистр.:
    1 сен 2009
    Сообщения:
    38
    Симпатии:
    7
    У тебя ошибка в коде
    Код:
    $(this).parents('.men_c').addClass='men_ca'
    должно быть
    Код:
    $(this).parents('.men_c').addClass('men_ca')
     
    alexz15 нравится это.