Question

我有一个或多个孩子的div。当我将鼠标悬停在父级div上时。问题是，当我将鼠标悬停在孩子身上时，它会再次显示。如何解决这个问题只是在我停止在父母上空时隐藏孩子。

.parent{
    width: 200px;
    height: 200px;
    background: red;
}
.child{
    width: 100px;
    height: 100px;
    background: green;
    opacity: 0;
    display: none;
}
.console{
    width: 200px;
    height: 50px;
    background: pink;
}

<div class="parent">
    <div class="child"></div>
</div>
<div class="console"></div>

var hovS = 0;
$('.parent').mouseover(function(){
    if(hovS == 0){
        $('.child').css('display', 'block');
        $('.child').animate({
            opacity: 1
        });
        hovS = 1;
    }
    $('.console').append(hovS + ' - ');    
});
$('.parent').mouseout(function(){
    if(hovS == 1){
        $('.child').css('display', 'none');
        $('.child').animate({
            opacity: 0
        });
        hovS = 0;
    }
    $('.console').append(hovS + ' - ');
});

jsfiddle code here

Answer 1

尝试使用悬停事件，它不会传播到子元素。所以它看起来像这样：

var hovS = 0;
$('.parent').hover(function(){

  if(hovS == 0){
    $('.child').css('display', 'block');
    $('.child').animate({
        opacity: 1
    });
    hovS = 1;
  }
  $('.console').append(hovS + ' - ');    
},function(){
  if(hovS == 1){
    $('.child').css('display', 'none');
    $('.child').animate({
        opacity: 0
    });
    hovS = 0;
  }
  $('.console').append(hovS + ' - ');
});

Answer 2

看起来你正在使用这种方式比所有css更改更难...因为你使用jquery为什么不做这样的事情呢？

JSFiddle

$(".parent").hover( function() {
    $(".child").fadeIn();
}, function() {
    $(".child").fadeOut();
});

此外，由于这些是类，它意味着可能有多个父母和孩子...您可能想要将子选择器更改为$(this).find(".child")...

如果你真的需要控制台的东西......

JSFiddle

$(".parent").hover( function() {
    $(this).find(".child").fadeIn();
    $(".console").append("1 - ");
}, function() {
    $(this).find(".child").fadeOut();
    $(".console").append("0 - ");
});

Answer 3

只需在动画前添加停止。

Fiddle here

像这样：

var hovS = 0;
$('.parent').mouseover(function(){
if(hovS == 0){
    $('.child').css('display', 'block');
    $('.child').stop().animate({
        opacity: 1
    });
    hovS = 1;
}
$('.console').append(hovS + ' - ');    
});
$('.parent').mouseout(function(){
if(hovS == 1){
    $('.child').css('display', 'none');
    $('.child').stop().animate({
        opacity: 0
    });
    hovS = 0;
}
$('.console').append(hovS + ' - ');
});

Answer 4

我会推荐smerny的回答;这真的是一个简单的问题。但是，如果你真的想要为不透明度制作动画，我会说这样做：

$('.parent').hover(function() { // use '.hover()', this first function handles the hover-in
    $('.child').css('display', 'block'); // assign this before the animation starts

    $('.child').stop().animate({ opacity: 1 }, 400); // use '.stop()' to avoid animation overlaps

}, function() { // this second function handles the hover-out
    $('.child').stop().animate({ opacity: 0 }, 400, function() { // callback function for the animation
        $('.child').css('display', 'none'); // assign this one when the animation is done
    });
});

JSFiddle Here

带有子项的元素上的jQuery mouseover / mouseout

4 个答案: