Question

我有多个这样的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>

我希望，当鼠标悬停在<a>内的div.image上时，也会触发<a> div.paw内的悬停效果（反之亦然），当然所有内部都是相同的div.project div

我试过这样但是我发现我没有看到div.paw a

上的悬停效果

$('body').on('mouseenter', 'div.image a', function() {
    $(this).closest('div.paw a').trigger('mouseenter');
});

CSS：

div.image  img{
  transition: all .3s ease;
}
div.image a:hover img {
  transform: scale(1.1);
}

div.info div.paw span {
  transition: all .3s ease;
}

div.info div.paw A {
  transition: all .3s ease;
}

div.info div.paw:hover span {
  width: 33px;
}

div.info div.paw:hover a {
  margin-left: 20px;
}

Answer 1

Closest找不到最近的元素（即当前元素旁边的元素），但是当前元素上方的第一个元素与选择器匹配。 https://api.jquery.com/closest/

您可以这样修复：

<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>

然后在你的代码中替换

$(this).closest('div.image a').trigger('mouseenter');

用

$('#'+$(this).data("info")).trigger('mouseenter');

修改

如果你想通过javascript添加一个css样式你唯一的机会是在元素中添加一个类，你不能使用javascript从CSS触发:hover效果。

你可以用这个来实现你所需要的：

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

你可以在css中放置你想要的任何内容，它将与:hover类的paw CSS中的内容相同。然后在代码中使用它来添加类：

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

见这里：http://plnkr.co/edit/SfUg9EkRhVGTEmpLhcsh?p=preview

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

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

Answer 2

您可以在css中添加'hover'类，然后使用Jquery .hover()方法使用.toggleclass()方法在mouseenter / mouseleave上切换'hover'类。

在您的悬停方法中，您可以通过使用.closest()遍历树到公共父'project'div，然后使用.find()来遍历树，从而选择下一个锚点。 paw div中的下一个锚元素。

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

以下是一个例子：

$("div.project div.image a").hover(function() {
  $(this).toggleClass("hover");
  $(this).closest("div.project").find("div.paw a").toggleClass("hover");
});

.hover {
   border: 2px solid black;
   background-color: red;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="project">
  <div class="image">
    <a href="#">
      <img width="100" height="100" src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a">
    </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>

<div class="project">
  <div class="image">
    <a href="#">
      <img width="100" height="100" src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a">
    </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>

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

2 个答案: