Jquery 在锚上悬停也会触发在最近的锚上悬停

我有多个div，如下所示：

<div class="project">
    <div class="image">
        <a href="#"><img width="789" height="504" src="//localhost:3000/wp-content/uploads/2016/02/featured4.png"></a>
    </div>
    <!-- /.image -->
    <div class="info">
        <h1>Title</h1>
        <div class="paw"><span></span><a href="//localhost:3000/2016/02/22/title/">view project</a></div>
    </div>
    <!-- /.info -->
    <div class="clearfix"></div>
</div>

CSS:

---

“最近的”不会找到最近的元素（即当前元素旁边的元素），而是找到与选择器匹配的当前元素上方的第一个元素。

您可以通过以下方式进行修复：

<div class="project">
    <div class="image">
        <a data-info="info-01" href="#"><img width="789" height="504" src="//localhost:3000/wp-content/uploads/2016/02/featured4.png"></a>
    </div>
    <!-- /.image -->
    <div class="info">
        <h1>Title</h1>
        <div class="paw"><span></span><a id="info-01" href="//localhost:3000/2016/02/22/title/">view project</a></div>
    </div>
    <!-- /.info -->
    <div class="clearfix"></div>
</div>

与

编辑

如果您想通过javascript添加css样式，您唯一的机会就是向元素添加一个类，您不能使用javascript从css触发

：hover

效果

您可以通过以下方式实现所需：

div.paw a.hover {
  color: #FF0000;
  font-size: 30px;
  transition-duration: 3s;
}

您可以在css中放入任何您想要的内容，它与您在

：hover

css中放入

paw

类的内容相同。然后在代码中使用此选项添加类：

$("#"+$(this).data("info")).addClass('hover');

请看这里：

请注意，您还需要处理mouseout事件

$('body').on('mouseout', 'div.image a', function() {
    $("#"+$(this).data("info")).removeClass('hover');
});

---

您可以将“hover”类添加到css中，然后使用Jquery方法在mouseenter/mouseleave上使用该方法切换“hover”类

在hover方法中，您可以选择下一个锚点，方法是使用向上遍历树到公共父“project”div，然后使用向下遍历树到paw div中的下一个锚点元素

这将仅对您悬停的图像和下一个div.paw锚点应用悬停

以下是一个例子：

$（“div.project div.image a”）。悬停（函数（）{
$（this.toggleClass（“悬停”）；
$（this）.closest（“div.project”）.find（“div.paw a”）.toggleClass（“hover”）；
});
。悬停{
边框：2件纯黑；
背景色：红色；
}

标题
标题
为什么不改为user（'.info a'）？是的，那是愚蠢的，我编辑了代码以查找div.paw a，现在没有错误，但我仍然看不到悬停效果？你说的是哪种悬停效果？？？如果设置为CSS，那么它将不起作用。我删除了我的评论，因为我认为我误读了问题，并阅读了div.image而不是div.paw，但你实际上已经更改了问题…哦，好吧，我不在乎guess@dzimi例如，切换一个
悬停
类：
div.info div.paw:hover a，div.info div.paw.hover a{margin left:20px；}
我太匆忙了。这段代码将触发与选择器匹配的每个元素，我将在第二时间修复。谢谢，但它仍然不会触发它，我猜正如wolf在评论中所说的，它不会触发css转换，就像那样，他提到切换类，尽管老实说，我仍然不明白他的意思。
$('#'+$(this).data("info")).trigger('mouseenter');

div.paw a.hover {
  color: #FF0000;
  font-size: 30px;
  transition-duration: 3s;
}

$("#"+$(this).data("info")).addClass('hover');

$('body').on('mouseout', 'div.image a', function() {
    $("#"+$(this).data("info")).removeClass('hover');
});