ホバーを変更するためのdiv背景色


91

マウスオーバーでdivの背景色を変更しようとしています。

div {background:white;}
div a:hover {background:grey; 幅:100%;
表示ブロック; text-decoration:none;}

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

div全体にその背景色を付けるにはどうすればよいですか?

ありがとうございました

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


回答:


117

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

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


44

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>

21

アンカーを置く必要はありません。ホバー時の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; }

17

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>

幸運を!


11

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を赤から青に変更します。



3

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>

これが役に立てば幸い


1

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;
}

0

あなたはこのようにアンカータグにdivを含めることができます:

a{
  text-decoration:none;
  color:#ffffff;
}
a div{
  width:100px;
  height:100px;
  background:#ff4500;
}
a div:hover{
  background:#0078d7;
}
<body>
<a href="http://example.com">
<div>
Hover me
</div>
</a>
</body>


-1

!important背景色がマウスオーバーで変化しないように、CSSファイルでプロパティを作成するだけです。これは私にとってはうまくいきました。

例:

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}

これは確かに質問に完全に答えるものではないので、答えにいくつかの詳細を添付するようにしてください。
Tatranskymedved、
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.