Question

我对此代码有疑问（我制作了一个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();
  });
});

部分代码被评论，因为我尝试了更多方法。

我想要做的是使用带有一些文本和bg图像的div，当鼠标悬停在另一个div上时，另一个div应该使用按钮slideDown。问题是我尝试了.mouseover .mouseout，.mouseeneter和.mouseleave，但它一直在闪烁。我发现当我在文本上它停止但如果我在div的空白区域它继续闪烁。有人有想法吗？非常感谢。

Answer 1

试试这个：

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

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

我希望它有所帮助。

Answer 2

您可以轻松使用

.caption{pointer-events:none}

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

Answer 3

试试这个。

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

    });

Answer 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

Answer 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();
});

jQuery .mouseover（）（。mouseout）div正在闪烁

5 个答案: