Как настроить таргетинг на конкретных детей .not ($ (this)) при наведении - PullRequest
Новая
       22

Как настроить таргетинг на конкретных детей .not ($ (this)) при наведении

0 голосов
/ 02 января 2019

Я работаю со списком повторяющихся фигур с изображениями внутри них и применяю эффекты наведения.Из этих цифр все, кроме той, над которой зависали, должны меняться при наведении курсора мыши.Так как внутри каждой фигуры есть figcaption, начальный наведенный курсор должен быть нацелен на всю фигуру, а не только на изображение внутри нее (потому что я хотел бы также изменить стиль текста при наведении курсора).

Например, когда я наводю указатель мыши на фигуру, она должна оставаться полноцветной, в то время как текст и изображения другого уменьшаются в непрозрачности и / или изменяют цвет на оттенки серого.

Мне удалось добавить класс к самой фигуре, но не к элементам внутри нее.Вот код, который я использовал: 

<figure class="thumb">
  <img src="http://placekitten.com/50/50">
  <figcaption>caption</figcaption>
</figure>
<figure class="thumb">
  <img src="http://placekitten.com/50/50">
  <figcaption>caption</figcaption>
</figure>
<figure class="thumb">
  <img src="http://placekitten.com/50/50">
  <figcaption>caption</figcaption>
</figure>

var $thisthis = '.thumb p';

$('.thumb').on('mouseover', function(event) {
  $('.thumb').not($(this)).addClass('hover');
});

$('.thumb').on('mouseout', function() {
  $('.thumb').not($(this)).removeClass('hover');
});

Когда я изменяю JQuery на этот, чтобы нацеливать определенные элементы, которые не находятся в $ (this), он ломается.

$('.thumb').on('mouseover', function(event) {
  $('.thumb figcaption').not($(this)).addClass('hover');
});

$('.thumb').on('mouseout', function() {
  $('.thumb figcaption').not($(this)).removeClass('hover');
});

http://jsfiddle.net/samseurynck/ka2Xs/57/

Я уверен, что что-то не так с тем, как я нацеливаюсь на элементы, но я не могу понять, как правильно подойти к нему.

Спасибо всем!

...