div の背景色、ホバー時に変更します

StackOverflow https://stackoverflow.com/questions/676324

  •  21-08-2019
  •  | 
  •  

質問

を作ろうとしています マウスオーバーでdivの背景色が変わります.

div {背景:白;}
div a:hover{背景:グレー;幅:100%;
表示ブロック;テキスト装飾:なし;}

のみ の リンク div内で 背景色を取得します.

を作るために何ができるでしょうか？ div全体がその背景色を取得しますか？

ありがとう

編集 ：
div 全体をリンクとして機能させるにはどうすればよいですか - その div 上のどこかをクリックすると、アドレスに移動します。

役に立ちましたか？

解決

」a:hover" 文字通り、ブラウザーにプロパティを変更するように指示します。 <a>-tag、マウスをその上に置いたとき。おそらくあなたが言いたかったのは、「the div:hover" 代わりに、div が選択されたときにトリガーされます。

念のため、特定の div だけを変更したい場合は、それに ID を付けてください ("<div id='something'>") そしてCSSを使用します"#something:hover {...}" その代わり。div のグループを編集したい場合は、それらをクラスにします ("<div class='else'>") そしてCSSを使用します".else {...}" この場合 (クラス名の前のピリオドに注意してください!)

他のヒント

JavaScriptの使用 

   <div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
    Jack and Jill went up the hill 
    To fetch a pail of water. 
    Jack fell down and broke his crown, 
    And Jill came tumbling after. 
    </div>

アンカーを打つ必要はありません。ホバーでDivのスタイルを変更するには、ホバーでDivの背景色を変更します。

<div class="div_hover"> Change div background color on hover</div>

.css ページ内

.div_hover { background-color: #FFFFFF; }

.div_hover:hover { background-color: #000000; }

div 全体をリンクとして機能させるには、アンカー タグを次のように設定します。

display: block

そして、アンカー タグの高さを 100% に設定します。次に、div タグに固定の高さを設定します。次に、通常のようにアンカー タグのスタイルを設定します。

例えば：

<html>
<head>
    <title>DIV Link</title>

    <style type="text/css">
    .link-container {
        border: 1px solid;
        width: 50%;
        height: 20px;
    }

    .link-container a {
        display: block;
        background: #c8c8c8;
        height: 100%;
        text-align: center;
    }

    .link-container a:hover {
        background: #f8f8f8;
    }

    </style>

</head>
<body>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>
    </div>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>
    </div>

</body> </html>

幸運を！

htmlコード:

    <!DOCTYPE html>
    <html>
    <head><title>this is your web page</title></head>
    <body>
    <div class = "nicecolor"></div>
    </body>
    </html>

CSSコード:

    .nicecolor {
      color:red;
      width:200px;
      height:200px;
     }

    .nicecolor:hover {
      color:blue;
     }

これが、div の上にカーソルを置くことで、div を赤から青に変更する方法です。

セット

display: block;

の上 ある そしてある程度の高さを出します

CSSの「hover」プロパティを試してみてください。例えば：

<html>
<head>
    <style>
        div
        {
            height:100px;
            width:100px;
            border:2px solid red;
        }
        div:hover
        {
            background-color:yellow;
        }
    </style>
</head>
<body>
            <a href="#">
                      <div id="ab">
                                <p> hello there </p>
                      </div>
            </a>
</body>

これが役立つことを願っています

div の周囲にアンカーを配置するだけです。

<a class="big-link"><div>this is a div</div></a>

その後

a.big-link {
background-color: 888;
}
a.big-link:hover {
 background-color: f88;
}

物件を作るだけ !important マウスオーバーで背景色が変わらないようにCSSファイルに追加します。これは私にとってはうまくいきました。

例：

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top