javascript jQuery .mouseover() (.mouseout) div 闪烁
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18570910/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .mouseover() (.mouseout) div is flickering
提问by Commax89
i have a problem with this code (i made a jsfiddle http://jsfiddle.net/r2y8J/).
我有这个代码的问题（我做了一个 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();
});
});
Part of the code is commented since I tried more ways.
由于我尝试了更多方法，因此对部分代码进行了注释。
What I want to do is to have a div with some text and a bg image, and when the mouse is over it another div should slideDown with a button. The problem is that I tried .mouseover .mouseout, .mouseeneter and .mouseleave but it keep flickering. I found that when i'm over the text it stops but if I am in a blank space of the div it continues flickering. Anyone has an idea? Thanks very much.
我想要做的是有一个带有一些文本和 bg 图像的 div，当鼠标悬停在它上面时，另一个 div 应该用一个按钮向下滑动。问题是我尝试了 .mouseover .mouseout、.mouseeneter 和 .mouseleave 但它一直闪烁。我发现当我在文本上时它会停止但如果我在 div 的空白区域它会继续闪烁。有人有想法吗？非常感谢。
回答by maverickosama92
try this:
试试这个：
$(document).ready(function() {
$(".bulletProj,.caption").mouseenter(function() {
$(".caption").toggle();
}).mouseleave(function () {
$(".caption").hide();
});
});
working fiddle here: http://jsfiddle.net/r2y8J/4/
在这里工作小提琴：http: //jsfiddle.net/r2y8J/4/
I hope it helps.
我希望它有帮助。
回答by Romaindr
You can easily use
您可以轻松使用
.caption{pointer-events:none}
回答by Ajoshi
Try this.
试试这个。
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").toggle();
}).mouseleave(function () {
console.log("mous leaves");
stopImmediatePropagation();
$(".caption").toggle();
});
回答by Greenhorn
I have faced a similar problem, in my case i have used css: opacitylike below to stop flickering
我遇到了类似的问题，在我的情况下，我使用css: opacity如下停止闪烁
css:
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');
});
Working Fiddle
工作小提琴
回答by CronosS
var caption = $(".caption");
$(".bulletWrapper").hover(function(){
console.log("mous is over");
caption.toggle();
}, function(){
console.log("mous leaves");
caption.toggle();
});
or
或者
$(".bulletWrapper").bind("mouseenter mouseleave", function(){
$(".caption").toggle();
});
