[英]jQuery .mouseover() (.mouseout) div is flickering
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. 我想要做的是有一个带有一些文本和一个bg图像的div,当鼠标结束时,另一个div应该用一个按钮slideDown。 The problem is that I tried .mouseover .mouseout, .mouseeneter and .mouseleave but it keep flickering.
问题是我尝试了.mouseover .mouseout,.mouseeneter和.mouseleave,但它一直在闪烁。 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.
我发现当我在文本上它停止但如果我在div的空白区域它继续闪烁。 Anyone has an idea?
有人有想法吗? Thanks very much.
非常感谢。
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. 我希望它有所帮助。
You can easily use 你可以轻松使用
.caption{pointer-events:none}
Try this. 尝试这个。
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").toggle();
}).mouseleave(function () {
console.log("mous leaves");
stopImmediatePropagation();
$(".caption").toggle();
});
I have faced a similar problem, in my case i have used css: opacity
like below to stop flickering 我遇到了类似的问题,在我的情况下,我使用了
css: opacity
如下所示,以停止闪烁
css: CSS:
.caption {
width: 300px;
height: 200px;
background-color: #69adf1;
position: absolute;
opacity:0;
}
JQuery: 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');
});
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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.