jQuery .mouseover() (.mouseout) div 闪烁答案

【问题标题】：jQuery .mouseover() (.mouseout) div is flickeringjQuery .mouseover() (.mouseout) div 闪烁
【发布时间】：2016-01-02 11:23:45
【问题描述】：

我对这段代码有疑问（我做了一个 jsfiddle http://jsfiddle.net/r2y8J/）。

$(document).ready(function() {
 /*$(".bulletProj").mouseenter(function () {
     console.log("You're Over!");
     $(".caption").animate(
        {top: "0px"},
        300, function() {
            console.log("i slided");
        });
    });
    $(".bulletProj").mouseleave(function() {
    $(".caption").animate(
        {top: "-200px"},
        300, function() {
            console.log("i left");
        });
    });*/
    $(".bulletProj").mouseenter(function() {
       console.log("mous is over");
       $(".caption").toggle();
    }).mouseleave(function () {
       console.log("mous leaves");
       $(".caption").toggle();
  });
});

由于我尝试了更多方法，部分代码被注释了。

我想要做的是有一个带有一些文本和背景图像的 div，当鼠标悬停在它上面时，另一个 div 应该用一个按钮向下滑动。问题是我尝试了 .mouseover .mouseout、.mouseeneter 和 .mouseleave 但它一直在闪烁。我发现当我看完文本时它会停止，但如果我在 div 的空白处，它会继续闪烁。有人有想法吗？非常感谢。

【问题讨论】：

因为你的 div .caption 占据了焦点，所以它会在你的 div bulletproj 上触发 mouseleave

标签： javascript jquery mouseevent mouseover flicker

【解决方案1】：

试试这个：

$(document).ready(function() {  
    $(".bulletProj,.caption").mouseenter(function() {              
         $(".caption").toggle();        
    }).mouseleave(function () {     
        $(".caption").hide();
    });
});

在这里工作小提琴：http://jsfiddle.net/r2y8J/4/

希望对你有帮助。

【讨论】：

嘿，这真的很好。谢谢你。只有一个问题，为什么在第一个选择器中你同时给出了 .bullProj 和 .字幕类？
@Commax89：闪烁效果正在显示，因为当您离开 bulletProj 时，它会在您站在 .caption 上时切换 .caption。所以你也必须在标题上绑定鼠标悬停才能顺利隐藏/显示

【解决方案2】：

您可以轻松使用

.caption{pointer-events:none}

http://jsfiddle.net/r2y8J/5/

【讨论】：

@Commax89 指针事件是完成这项工作的好方法。但请注意，标题中的任何文本/链接都将无法选择/无法点击。

【解决方案3】：

试试这个。

$(".bulletProj").mouseenter(function() {
        console.log("mous is over");
        $(".caption").toggle();
    }).mouseleave(function () {
        console.log("mous leaves");
        stopImmediatePropagation();
        $(".caption").toggle();

    });

【讨论】：

【解决方案4】：

我遇到过类似的问题，在我的情况下，我使用css: opacity 如下所示来停止闪烁

css:

.caption {
width: 300px;
height: 200px;
background-color: #69adf1;
position: absolute;
opacity:0;
}

JQuery:

$(".caption").mouseenter(function(){
$(this).css('opacity','1');
})
$(".bulletProj").mouseenter(function() {
    console.log("mous is over");
    $(".caption").css('opacity','1');
}).mouseleave(function () {
    console.log("mous leaves");
    $(".caption").css('opacity','0');
});

工作Fiddle

【讨论】：

【解决方案5】：

var caption = $(".caption");
$(".bulletWrapper").hover(function(){
    console.log("mous is over");
    caption.toggle();
}, function(){
    console.log("mous leaves");
    caption.toggle();
});

或

$(".bulletWrapper").bind("mouseenter mouseleave", function(){
    $(".caption").toggle();
});

【讨论】：