95

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

div {background:white;}
div a:hover{background:grey; 幅:100%;
表示ブロック; テキスト装飾:なし;}

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

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

ありがとうございました

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

4

10 に答える 10

119

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

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

于 2009-03-24T06:30:50.800 に答える
46

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>

于 2009-03-24T06:33:12.090 に答える
27

アンカーを入れる必要はありません。ホバー時に div のスタイルを変更するには、ホバー時に div の背景色を変更します。

.div_hover {
  background-color: #FFFFFF;
}

.div_hover:hover {
  background-color: #000000;
}
<div class="div_hover"> Change div background color on hover</div>

于 2012-01-12T02:56:08.520 に答える
18

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>

幸運を！

于 2009-03-24T07:13:56.610 に答える
5

設定

display: block;

上に乗って高さをあげます

于 2009-03-24T06:58:57.113 に答える
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>

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

于 2013-10-31T10:36:32.417 に答える
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;
}
于 2011-01-28T11:14:16.973 に答える
0

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

例：

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}
于 2018-05-28T08:23:18.630 に答える