マウスを動かしたときにちらつくことなく、マウスを動かすとdivが消えますか？

:hover cssでちょうどdisplay:noneと回答しました。しかし、それはマウスが動いているときにdivをちらつくようにします。マウスを動かしたときにちらつくことなく、マウスを動かすとdivが消えますか？

編集：追加されました、それはなど、その後、すぐに:hover状態を失い再表示され、再び:hoverを取得し、消えて、再表示されますので、レンダリングツリーの外に要素がかかりますjsfiddle

出典

2011-04-30 aph

あなたにこの問題を与えている正確なHTMLとCSSを投稿し、そして好ましくはhttp://jsfiddle.net/ –

に入れてください、あなたはjQueryのを使用して大丈夫ですか？ –

ここに例があります：http：// jsfiddle。net/userdude/VvsG2/ –

display:none ...

何

#elem { opacity:0; filter:alpha(opacity=0); }

それは空の場所を離れますので、ちらつきが表示されません：あなたはである必要があります。あなたはこのような何かを持っている場合は（Demoまたはyours updated）

出典

2011-04-30 21:12:58 galambalazs

3つの例（可視性、表示、不透明度）：http://jsfiddle.net/userdude/VvsG2/4/ –

は：

div:hover 
{ 
    display:none; 
}

は、その後、あなたがちらつきを回避するための方法はありません。オン：ホバリングすると要素が見えなくなり、もうホバリングしなくなり、再び表示されます。表示されるとすぐに：ホバーをもう一度やり直していきます。

オン：ホバリング要素が見えなくなり、もうホバリングしなくなり、再び表示されます。表示されるとすぐに：ホバーをもう一度やり直していきます。

オン：ホバリング要素が見えなくなり、もうホバリングしなくなり、再び表示されます。それが表示されるとすぐに：ホバーをもう一度やり直してください。

... これは短くなるようにちらつきます。は、より良いオプションは、不透明度を使用するには、このようなものになるだろう：CSS3と必要に応じて

div:hover 
{ 
    opacity:0; 
}

出典

2011-04-30 21:15:21

が、唯一の（IEを除く）最新のブラウザ上で動作します。編集：jqueryとCSS3の両方を使用した@jsfiddleの例を示します。

<html> 
<head> 
    <title>CSS3 hover</title> 
<style type="text/css"> 
#hover{ 
    width:100px; 
    height:100px; 
    background-color:#000000; 
    -webkit-transition:opacity 0.2s ease; 
    -moz-transition:opacity 0.2s ease; 
    -o-transition:opacity 0.2s ease; 
} 
#hover:hover{ 
    // Red(0-255), Blue(0-255), Green(0-255), Alpha (0-1) 
    background-color:rgba(100,100,100,0); 
    opacity:0; 
} 
</style> 
</head> 
<body> 
    <div id="hover"></div> 
</body> 
</html>

出典

2011-04-30 23:04:43 robx

+1のトランジション効果。ウェイクール！ – aph

ああ、JSメソッドはブラウザ間で動作するとは言わず、CSS3はIEでは動作しません。 – robx

JavaScriptを使用して、オブジェクトにマウスを乗せたときにクラスを設定します（例：不可視）。次に、オブジェクトにその不可視クラスがある場合は、cssを使用してnoneを表示します。それはもはや存在しないので、クラスを削除して目に見えないクラスをリセットするには、マウスの座標をチェックする（または別の要素のマウスのホバーイベントを使用する）必要があります。

出典

2016-06-20 20:30:38 ejectamenta

マウスを動かしたときにちらつくことなく、マウスを動かすとdivが消えますか？

答えて

関連する問題