用多个类悬停时用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'，因为您要定位下一个兄弟，而不是孩子

以下是您可以使用的工作示例：

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
  });
});

Answer 2

The Demo is Here

JS代码

 $(document).ready(function(){
  $('.div1').mouseenter(function(){
    $(this).next('.div2').css('opacity','1');
  });
  $('.div1').mouseleave(function(){
    $(this).next('.div2').css('opacity','0');
  });
});

Answer 3

如果您对仅限CSS的解决方案持开放态度，可以使用sibling selector

＆＃13;

＆＃13;

.div2 {
  opacity: 0;
}

.div1, .div2 {
  border: 3px solid pink;
  width: 50px;
  height: 50px;
}

.div1:hover + .div2 {
  opacity: 1;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

你没有类div这样的元素，所以你没有选择任何div。要将每个div包装div来悬停，添加将为mouseenter和mouseleave事件绑定处理程序的类。请参阅下面的代码段：

＆＃13;

＆＃13;

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

＆＃13;

.div2 {
    opacity: 0;
}

＆＃13;

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

        

＆＃13;

＆＃13;

＆＃13;