1

ここに例を示します: 50x50 ピクセル サイズの DIV があり、黒い境界線と白い背景があります。div にカーソルを合わせると、背景色が赤に変わります。

問題は、DIV に一度ホバーしたときに、マウスを離しても背景色を赤のままにするにはどうすればよいかということです。

つまり、クリックする代わりにホバリングすることで、どのように DIV をアクティブにできるのでしょうか?

編集: Javascript も問題ありません。可能であれば、クロスプラットフォーム ソリューションが推奨されます。

4

3 に答える 3

1

純粋なCSSソリューションの場合、遷移を使用する必要があります。

div
{
     background:white;
     -webkit-transition:background 0s;
     -webkit-transition-delay:999999s;
     -moz-transition:background 0s;
     -moz-transition-delay:999999s;
     transition:background 0s;
     transition-delay:999999s;
}
div:hover
{
     background:red;
     -webkit-transition-delay:0s;
     -moz-transition-delay:0s;
     transition-delay:0s;
}

すぐに赤になりますが、白になるまでに時間が0sかかり999999sすぎます（増やすことができます）。誰かがページを何時間も、何日も開いたままにしないと確信しています...

于 2013-03-10T22:20:00.103 に答える
1

以下のようにする必要があります。

   <div id="content" onmouseover="this.style.backgroundColor='red';"  > Testing div ... </div>

これはそれをテストするためのjsfiddleです。

于 2013-03-10T22:15:39.850 に答える
1

CSS ソリューションはすべてのブラウザーで機能するとは限らないため、JavaScript を使用する必要があります。他の回答が示唆するように、DOM レベル 0 イベントを使用しない方がよいでしょう。ベスト プラクティスは、CSS でスタイルを設定できるクラスを div に追加することです。jQuery を使用して、次のようなことができます。

$(function(){    
    $('#myDiv').on('mouseenter', function(){
        $(this).addClass('active');
    });
});

次にスタイルを設定します。

#myDiv.active {
    background: red;
}

これにより、ページの構造、スタイル、および機能が分離され、今後の保守が容易になります。また、同じ機能をページ上の他の要素に簡単に追加することもできます。

于 2013-03-10T22:23:21.213 に答える