jquery - jQuery非表示+マウスでのCSSホバーの問題

Question

CSS：hover効果を要素に適用し、その要素を非表示にしてマウスを完全に静止させた場合、マウスが移動するまでホバー効果が存在することに気付いた人はいますか？

検索しましたが、同様のスレッドが他に見つからないようです。私はそれがおそらく簡単であることを知っていますが、私は解決策を見つけることができず、それは私がベッドラムに行き着く原因になります。

私が何を意味するかを理解するには、このフィドルを見てください：http: //jsfiddle.net/NsMKN/ and

カーソルが移動すると、：hoverは適切に適用されませんが、マウスを移動したり、jQueryを使用してホバー効果を適用したりせずに（CSSに任せて）これを行う方法はありますか？

更新： IEのもののように見えるので、私はStarxを答えとしてマークしました。助けてくれてありがとう。

素晴らしいpiccy

score 0 · Accepted Answer

コードを分割させてください。

<div class="tester">
    <div class="content">
        apple, banana, carrot, lettuce, celery, beetroot
    </div>
</div>

ここでは、一般的なケースでは、内部にあるものに関してそれ自体をラップする div.contentが内部にあります。.tester

.tester:hover
{
   background-color:red; 
}

CSS は同じラッパー div ie にも適用され.testerます。そのため、この部分にマウスを合わせると、背景色が変わります。

$('.tester').click(function () {
    $(this).children('.content').toggle();
});

ここで、内側の要素を切り替えて表示できるようにします。の寸法は.tester、内部の要素に応じて変化します。あなたの場合は修正されていますが、DOM はその子も考慮する必要があります。このfiddleで同じことをしてみてください。

問題を示す例

この理由により、マウスはまだdiv の上にあり.testerます。そのため、style of.tester:hoverは引き続き適用されます。

これで、トグルする.contentと、ラッパー div.testerは、さらにイベントが発生するまで前の状態を保持します。

IE などのブラウザは、次のイベントが発生するまで DOM プロパティを更新しないようです。

score -1 · Accepted Answer

この問題は私には発生していません。ただし、これを試すことができます: http://jsfiddle.net/NsMKN/1/

.tester
{
   width:100px;
   min-height:100px;
   background-color:Black;
}

2 に答える 2