4

:hoverオブジェクトを遷移させると、マウスを移動するまでホバー状態は更新されません (CSS ルールは)。

ユーザーのマウスの下に DOM 要素を (transitionまたは他の同等のものを使用して) 移動すると、ホバー状態はマウスが移動するまで更新されません。これに対する回避策はありますか? 「マウスオーバー」イベントを発生させるために派手なJSに入りたくありません。

JSFiddle: http://jsfiddle.net/forestka/8xJkR/1/

HTML:

<div id="below">
  This is the one below. (Now move the mouse.)
</div>
<div id="hover">
  Click me! (But don't move the mouse after you click)
</div>

CSS:

#hover:hover,
#below:hover {
  background-color: #f00;
}

#below {
  padding:10px;
  position: absolute;
  top:0;
  left:0;
}

#hover {
    background-color: #ddd;
    padding: 10px;
    position: absolute;
    left: 0;
    top:0;
    transition: top 1s ease;
    z-index: 100;
}

#hover.hidden {
    top: 50px;
}

補足: コードなしで JSFiddle リンクを挿入することはできませんか??

4

1 に答える 1

1

それはかなり奇妙です。IE10も同様の動作をするようです。主要な 3 つのブラウザーの中で、Firefox は、あなたが望むことを行う唯一のブラウザーのようです。(マウスを動かしてホバー状態を表示する代わりに、非表示の div のホバー状態を表示します)

これは明らかに望んでいるものではありませんが、回避策が必要な場合は、次のようにすることができます。

$("#hover").click(function() {
    $("#hover").addClass("hidden");
    $("#below").trigger("mouseover");
});

$("#below").hover(function() {
     $("#below").css("background-color", "#f00");
}, function () {
    $("#below").css("background-color", '');
});

JS フィドルのデモ

誰かが CSS のみを使用したより良い解決策を持っているかもしれませんが、とにかくあなたの質問に答えを出そうと思いました.

于 2013-05-16T18:24:43.047 に答える