javascript - 在多个类悬停时使用 Jquery 显示 div

Question

当我将鼠标悬停在同一个 div 中关联的 div1 时，我想缓慢地显示一个 div2。 我看不出问题出在我的 jquery 中...

$(".div").hover(function() {

  $(this).find(".div2").animate({
    opacity: "1"
  }, {
    queue: false
  });
}, function() {
  $(this).find(".div2").animate({
    opacity: "0"
  }, {
    queue: false
  });
});

.div2 {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <div class="div1">
    </div>
    <div class="div2">
    </div>
  </div>
  <div>
    <div class="div1">
    </div>
    <div class="div2">
    </div>
  </div>
  <div>
    <div class="div1">
    </div>
    <div class="div2">
    </div>
  </div>
</div>

Answer 1

您的目标是 $('.div')而不是 $('.div1')或 $('div') .没有类别为 .div 的元素在你的代码中，所以这可能是一个错字。

您还必须更改 .find()至 .next()如果你想在悬停在 '.div1' 上时触发事件元素，因为您想定位下一个 sibling ，而不是 child 。

这是一个您可以引用的工作示例:

https://jsbin.com/vipifolahe/edit?html,js,output

HTML

<div>
    <div>
         <div class="div1">
         </div>
         <div class="div2">
         </div>
    </div>
    <div>
         <div class="div1">
         </div>
         <div class="div2">
         </div>
    </div>
    <div>
         <div class="div1">
         </div>
         <div class="div2">
         </div>
    </div>
</div>

CSS

.div1 {
  height: 50px;
  background-color: red;
}

.div2 {
  height: 50px;
  background-color: green;
}

.div2 {
  opacity: 0;
}

JS

$(".div1").hover(function () {

  $(this).next(".div2").animate({
    opacity: "1"
  }, {
    queue: false
  });
}, function () {
  $(this).next(".div2").animate({
    opacity: "0"
  }, {
    queue: false
  });
});

---

如果你想在父 div 悬停时触发事件，它可能看起来像这样:

HTML

<div>
    <div class="parent">
         <div class="div1">
         </div>
         <div class="div2">
         </div>
    </div>
    <div class="parent">
         <div class="div1">
         </div>
         <div class="div2">
         </div>
    </div>
    <div class="parent">
         <div class="div1">
         </div>
         <div class="div2">
         </div>
    </div>
</div>

JS

$(".parent").hover(function () {

  $(this).find(".div2").animate({
    opacity: "1"
  }, {
    queue: false
  });
}, function () {
  $(this).find(".div2").animate({
    opacity: "0"
  }, {
    queue: false
  });
});