3

Cssの「ホバー」セレクターは要素に一時的なスタイルを適用しますが、それは決定的なものではありません。

div:hover {
 background-color: red;
}

javascriptでも同じことができますが、少し複雑で、いくつかの要素では不可能です。

var elem = document.getElementsByTagName ("div")[0];

elem.onmouseover = function () {
 this.style.backgroundColor = "red";
}

elem.onmouseout = function () {
 this.style.backgroundColor = "transparent";
}

もっと良い方法はありますか？このようなもの：

document.getElementsByTagName ("div")[0].ontemporarymouseover = function () { // LoL
 this.style.backgroundColor = "red";
}

ありがとう

4

4 に答える 4

2

いいえ、自然に消えるスタイルを適用する方法はありません。

CSS には定義が 1 つしか含まれていませんが、実際には と をトリガーする 2 つの状態変化に対応していonmouseoverますonmouseout。ポインターが要素に入ると、:hover疑似クラスが要素に追加され、CSS ルールが適用されます。ポインターが要素から離れると、:hover疑似クラスが削除され、CSS ルールが適用されなくなります。

于 2010-05-16T15:50:55.430 に答える
1

mouseoverJavaScript では、2 番目の例で行ったように、この動作はおよびmouseout DOM イベントをリッスンすることによってのみ処理できます。ただし、最初の例のように、ホバリング スタイルを CSS で処理することをお勧めします。

于 2010-05-16T15:39:27.867 に答える
0

// jQuery 'Temporary mouseevents'

$("element").bind
({
    mouseover:
        function ()
        {
        },
    mouseout:
        function ()
        {
        }
});

$("element").unbind('mouseover mouseout');

これがあなたが必要とするものに対する良いアプローチであることを願っています。

于 2010-05-16T16:06:20.583 に答える
0

jQuery JavaScript フレームワークを使用すると、次のことができると思います。

$('div:first').hover(function(){
   $(this).css('background-color','red');
},function(){
   $(this).css('background-color','white');
});
于 2010-05-16T15:50:33.933 に答える