Добавление класса при наведении только для одного элемента

Тема в разделе "JavaScript", создана пользователем Menro, 23 окт 2015.

Модераторы: ZiX
  1. Menro

    Menro web, seo, email, hack

    Регистр.:
    27 янв 2008
    Сообщения:
    608
    Симпатии:
    117
    Всем привет!
    Вот накидал скриптик:
    PHP:
    <script>
    (function($)
    {
        $(
    document).ready(function()
        {
    $(
    '.dj-album-description').hover(
        function(){ $(
    '.dj-ctitle-in').addClass('yellow') },
        function(){ $(
    '.dj-ctitle-in').removeClass('yellow') }
    )
    })
    })(
    jQuery);
    </script>
    При наведении на класс dj-album-description дописывается класс yellow к классу dj-ctitle-in.
    Работает почти так как надо, только одно но.

    У меня на странице вот такая структура:

    <div class="category">
    <div class="dj-album-description"></div>
    <div class="dj-ctitle-in"></div>
    </div class="category">

    И таких конструкций 4 штуки, полностью одинаковы.
    Когда навожу на dj-album-description класс добавляется ко всем dj-ctitle-in, а нужно только к тому, на dj-album-description которого наведён курсор.

    Собственно вот сам пример:
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    Код:
    $('.dj-album-description').hover(function(){
      $(this).next().toggleClass('yellow');
    });
    а вообще посмотрел на сайт и могу сообщить, что проще просто переверстать и можно будет обойтись средствами ксс.
    Структура получится следующая:
    a.dj-category > img.dj-category-in + span.dj-album-description + span.dj-ctitle-in

    [​IMG]
     
    Последнее редактирование модератором: 25 окт 2015
    Menro нравится это.
  3. Menro

    Menro web, seo, email, hack

    Регистр.:
    27 янв 2008
    Сообщения:
    608
    Симпатии:
    117
    Перевёрстывать что-то прям совсем не хочется....
    Не сработал этот код. Может я что-то не так вставил или ещё, что...
     
  4. denverkurt

    denverkurt Denve®

    Регистр.:
    23 дек 2013
    Сообщения:
    640
    Симпатии:
    369
    Код:
    <script>
    (function($)
    {
        $(document).ready(function()
        {
    $('.dj-album-description').hover(
        function(){ $(this).next().addClass('yellow') },
        function(){ $(this).next().removeClass('yellow') }
    )
    })
    })(jQuery);
    </script>
    хотя можно прикрутить стили используя чистый CSS без использования JS и jQuery:
    Код:
    <style>
    .dj-album-description:hover + .dj-ctitle-in {
    ...
    ...
    ...
    }
    </style>
     
    Menro нравится это.
  5. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    потому что на сайте структура верстки отличается от представленной в посте.
    Код:
    $(this).next().toggleClass('yellow');
    надо заменить на
    Код:
    $(this).find('.dj-ctitle-in').toggleClass('yellow');
     
    Menro нравится это.