在锚点悬停时也会触发将鼠标悬停在最近的锚点上

debugcn 发表于 Dev

今天

我有多个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.projectDIV

我试过像这样，但我明白我没有看到悬停效果 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;
}

布里诺

您可以将“ hover”类添加到CSS中，然后使用Jquery .hover（）方法使用.toggleclass（）方法在mouseenter / mouseleave上切换“ hover”类。

从悬停方法中，您可以选择下一个锚点，方法是使用.closest（）然后再使用.find（）将树遍历到公共父项“ project” 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/[email protected]?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/[email protected]?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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。