マウスとマウスの同時発火。 私がしたいすべてのマウスが上にあるとき、要素を非表示にして、テリーさんのコメント@パーマウスとマウスの同時発火
$('#myid').on('mouseenter', function(event) {
$(this).fadeOut();
});
$('#myid').on('mouseleave', function(event) {
$(this).stop().fadeIn();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="myid" >{{property}}</span>出た場合に示すことである、fadeOutイベントが0に不透明度をアニメーション化して、設定します要素を隠し、それが表示されていない何かをホバリングもはやだから（mouseleaveイベントをトリガしませんnoneからdisplay。
は単に代わりにディスプレイの不透明度をアニメーション（フェードイン、フェードアウト）
$('#myid').on('mouseenter', function(event) {
$(this).animate({'opacity': 0});
});
$('#myid').on('mouseleave', function(event) {
$(this).animate({'opacity': 1});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="myid" >{{property}}</span>ええ、dat作品！ –
そして、この要素を非表示にして、このスパンの背後にある要素をブロックしないようにするにはどうすればいいですか？ –
隠しdivの下にボタンがあり、クリックイベントを発生させないようにします –
あなたはまた、唯一のCSSを使用して、この効果を得ることができ、この
$('#myid').on('mouseenter', function(event) {
$(this).hide();
});
$('#myid').on('mouseleave', function(event) {
$(this).fadeIn();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="myid">{{property}}</span>で試すことができます。
#myid {
opacity: 1;
transition: 0.4s;
}
#myid:hover {
opacity: 0;
transition: 0.4s;
}<span id="myid" >{{property}}</span>選択した回答を返信してください。もっと清潔なソリューション –
@JessedeBruijne私はこのように感じてうれしいです。たぶんOPには、他の行為と組み合わせる方が簡単な場合があるかもしれません。 – Rajesh
あなたはこれを試すことができます。 はCSSを追加します。
#mydiv { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
のjQueryを追加します。これを試して
jQuery("#mydiv").mouseenter(function(event) {
jQuery(this).css({
opacity: '0'
});
});
jQuery("#mydiv").mouseleave(function(event) {
jQuery(this).css({
opacity: '1'
});
});
してください。
$('#myid').on('mouseenter', function(event) {
$(this).css('opacity', 0);
});
$('#myid').on('mouseleave', function(event) {
$(this).css('opacity',1);
});#myid{
-webkit-transition:0.5s;
transition:0.5s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="myid" >{{property}}</span>
要素が隠されている場合、カーソルがその境界内にもはやであるので、それは 'mouseleave'イベントをトリガするためではないこと。 'fadeOut（）'は 'display：none'を実際に設定するので、代わりに不透明度で遊んでみるべきです。 – Terry
あなたのコードをスニペットにラップし、 'hidden'属性を削除しました。ユーザーはそれをテストできます。 – Rajesh