Question

我正在处理一张重复的图形列表，其中包含图像，并且正在应用悬停效果。在这些数字中，除鼠标悬停以外的每个数字都应在鼠标悬停时更改。由于每个图形中都有一个figcaption，因此初始悬停应该针对整个图形，而不仅仅是其中的图像（因为我也想更改悬停时文本的样式）。

例如，当我将鼠标悬停在一个图形上时，该图形应保持全彩色，而其他人的文本和img则变为不透明和/或变为灰度。

我已经成功地向图形本身添加了一个类，但没有添加其中的元素。这是我一直在使用的代码：

<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以定位不在$（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/

我确定我的元素定位方式有问题，但是我似乎无法找出正确的方法。

谢谢！

如何在悬停时定位.not（$（this））的特定子对象

0 个答案: