divはリンク上でonmouseoverイベントを隠す

私はdivと 'onlclick'イベントでdivを呼び出し、onmouseoutイベントを適切に隠す簡単なjQueryコードを持っています。問題は、この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

JavaScriptコードをHTML から削除してください。

$(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の外側に置く必要があります。

うーん、いや、私はそれを得る、代わりにインラインのもので、これを試してください：http://jsfiddle.net/GkSGz/

：

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

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


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

ここでフィドル、ではない私はそれを行うような方法が、私はあなたの例に得ることができる最も近いです

出典

2011-10-18 21:04:21 adeneo

私は#sample外のリンクを配置し、#sample divの上に置くためにそれを配置している - あなたはそれの上に移動すると、それはまだ隠し... –

は私が探していたまさに@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イベントを隠す

答えて

関連する問題