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

Menro

web, seo, email, hack
Регистрация
27 Янв 2008
Сообщения
689
Реакции
138
Всем привет!
Вот накидал скриптик:
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 которого наведён курсор.

Собственно вот сам пример:
Скрытое содержимое доступно для зарегистрированных пользователей!
 
Код:
$('.dj-album-description').hover(function(){
  $(this).next().toggleClass('yellow');
});

а вообще посмотрел на сайт и могу сообщить, что проще просто переверстать и можно будет обойтись средствами ксс.
Структура получится следующая:
a.dj-category > img.dj-category-in + span.dj-album-description + span.dj-ctitle-in

giphy.gif
 
Последнее редактирование модератором:
Код:
$('.dj-album-description').hover(function(){
  $(this).next().toggleClass('yellow');
});
Перевёрстывать что-то прям совсем не хочется....
Не сработал этот код. Может я что-то не так вставил или ещё, что...
 
Код:
<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>
 
Перевёрстывать что-то прям совсем не хочется....
Не сработал этот код. Может я что-то не так вставил или ещё, что...
потому что на сайте структура верстки отличается от представленной в посте.
Код:
$(this).next().toggleClass('yellow');
надо заменить на
Код:
$(this).find('.dj-ctitle-in').toggleClass('yellow');
 
Назад
Сверху