Div隐藏链接上的onmouseover事件

div hides onmouseover event on a link

本文关键字：onmouseover 事件 隐藏 链接 Div      更新时间：2023-09-26

我有一个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>

使用mouseenter和mouselleave。

在文档准备函数中添加这个

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

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

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

  $(function(){
   $("#sample").hide();
    $("a").click(function() {
        $("#sample").fadeIn('slow');
        return false;
    });    
    $("#sample").mouseout(function() {
        $("#sample").fadeOut('slow');
    });
})();
演示

您的<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/

相关文章：