Question

我有一个div和一个简单的jQuery代码，它在'onlclick'事件上调用div并正确隐藏'onmouseout'事件。问题是当我在这个div中放置一个文本或一个链接并将光标移动到这个div中的文本/链接上时 - 它会触发out（）函数效果并消失 - 即使光标仍在div中。为什么会这样？感谢您的评论。

<script src="js/jquery.js"></script>
<style type="text/css">
#sample {
position:relative;
width:500px;
height:200px;
background-image:url(images/img.png);
background-repeat:repeat-x;
}

</style>
</head>

<body>
<a href="javascript:show();" >link</a>
<div id="sample" onmouseout="out()"><a href="">THIS IS TEXT</a></div>


<script type="text/javascript">
$(document).ready(function() { 
$("#sample").hide();
});

function show() {
$("#sample").fadeIn('slow');

}

function out() { 

$("#sample").fadeOut('slow');

}
</script>
</body>
</html>

Answer 1

使用mouseenter和mouseleave。

在文档就绪功能中添加此

jQuery("#sample").mouseleave(out);

并从HTML标记中删除onmouseout代码。

Answer 2

从HTML中删除JavaScript代码试试这个。

  $(function(){

   $("#sample").hide();
    $("a").click(function() {

        $("#sample").fadeIn('slow');
        return false;
    });    
    $("#sample").mouseout(function() {
        $("#sample").fadeOut('slow');
    });

})();

Demo

Answer 3

您的<a>元素位于#sample元素内，因此在#sample上运行fadeOut会隐藏它，以及其中的所有内容。要保持<a>，您需要将其放在html中的#sample之外。

噢，不，我明白了，试试这个而不是内联的东西：

$("#sample").hide();

$("a").mouseenter(function() {
    $("#sample").fadeIn('slow');
});


$("#sample").mouseleave(function() {
$("#sample").fadeOut('slow');
});

这是一个小提琴，不是我会这样做的，但是我能得到你最接近的例子：http://jsfiddle.net/GkSGz/

div隐藏链接上的onmouseover事件

3 个答案: