div在鏈接上隱藏onmouseover事件

我有一個div和一個簡單的jQuery代碼，它在'onlclick'事件中調用div並正確隱藏'onmouseout'事件。問題是當我把一個文本或鏈接放在這個div裏，並將光標移動到這個div的文本/鏈接上時 - 它會觸發out（）函數效果並消失 - 即使光標仍在div內。爲什麼？感謝您的評論。div在鏈接上隱藏onmouseover事件

<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>

來源

2011-10-18 Mr X

從HTML 中刪除JavaScript代碼並嘗試一下。

$(function(){ 

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

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

})();

Demo

來源

2011-10-18 21:17:33 Anoop

你<a>元素是#sample元素中，等等#sample運行淡出將隱藏它，並在它裏面的一切。要保持<a>您需要將它放在HTML的#sample之外。

哦，不，我得到它，試試這個，而不是行內的東西：

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

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


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

這裏有一個小提琴，不是我會做的方式，但最近我能得到你的例子：http://jsfiddle.net/GkSGz/

來源

2011-10-18 21:04:21 adeneo

我已經放在#sample外的鏈接，並定位它放在#sample格 - 當你搬過來吧... –

@epascarello正是我一直在尋找它仍然隱藏因爲 - 非常感謝很多人！ –

使用mouseenter和mouseleave。

在文件準備功能添加此

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

，並從HTML標記刪除的onmouseout代碼。

來源

2011-10-18 21:05:02 epascarello

在此處查看：http://jsbin.com/ecalul/edit#javascript,html – epascarello

div在鏈接上隱藏onmouseover事件

回答

相關問題