用多个类悬停时用Jquery显示div

I would like to show one div2 slowly when I hover a div1 associated in the same div. I do not see where the problem is in my jquery...

当我将同一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>

4 个解决方案

#1

You are targeting $('.div') and not $('.div1') or $('div'). There is no element with class .div in your code, so this is probably a typo.

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

You also have to change .find() to .next() if you want to trigger the event when hovering over a '.div1' element, since you want to target the next sibling, and not a child.

如果要在悬停在'.div1'元素上时触发事件,则还必须将.find()更改为.next(),因为您要定位下一个兄弟,而不是孩子。

Here's a working sample you can go by:

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

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

---

If you want to trigger the event when the parent div is hovered over, it could look like so:

如果你想在父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
  });
});

#2

The Demo is Here

演示就在这里

JS Code

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

#3

If you are open to a CSS only solution you can use the sibling selector

如果您对仅CSS解决方案持开放态度,则可以使用兄弟选择器

.div2 {
  opacity: 0;
}

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

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

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

#4

You have no such element with class div, so you are not selecting any of the divs. To each div wrapping up divs to hover, add class that will binds handlers for both mouseenter and mouseleave events. Please see snippet below:

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

$(".wrapper").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 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>