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

3  

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

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

JS

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

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

1  

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

1  

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

0  

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

    

         
one
         
         
one hidden
         
    
    

         
two
         
         
two hidden
         
    
    

         
three
         
         
three hidden