css - div背景颜色,改变onh

我试图在鼠标悬停时使div的背景颜色发生变化。

div {background:white;}
div a:hover {background:grey;宽度:100%;
显示:块;文字修饰:无;}

只有div中的链接才能获得背景颜色。

我该怎么做才能使整个div获得背景颜色?

谢谢

编辑:
如何让整个div作为一个链接 - 当你点击该div上的任何地方时,带你到一个地址。

Ionuț G. Stan asked 2019-09-10T22:31:30Z
9个解决方案
106 votes

<div id='something'>”字面上告诉浏览器在鼠标悬停在其上时更改#something:hover {...}标签的属性。 您可能想要的是“<div class='else'>”,它会在选择div时触发。

只是为了确保,如果你只想改变一个特定的div,给它一个id(“<div id='something'>”)并使用CSS“#something:hover {...}”代替。 如果要编辑一组div,请将它们组成一个类(“<div class='else'>”),并在这种情况下使用CSS“.else {...}”(注意类名称前的句号!)

Henrik Paul answered 2019-09-10T22:31:52Z
40 votes

使用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>
Real Red. answered 2019-09-10T22:32:16Z
19 votes

没有必要放锚。 要在悬停时更改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; }
Virsj Bhorania answered 2019-09-10T22:32:46Z
16 votes

要使整个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>

祝好运!

Shaun answered 2019-09-10T22:33:20Z
10 votes

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从红色变为蓝色。

user3689455 answered 2019-09-10T22:33:56Z
5 votes

display: block;

在一个高度上

Jamol answered 2019-09-10T22:34:22Z
3 votes

只需尝试CSS的“悬停”属性。 例如:

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

我希望这个能帮上忙

Tajveer Singh Nijjar answered 2019-09-10T22:34:52Z
1 votes

你可以把锚放在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;
}
Nicki answered 2019-09-10T22:35:18Z
-1 votes

只需在您的css文件中创建属性!important,以便鼠标悬停时背景颜色不会改变。这对我有用。

例:

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}
T-Jayanth Dore answered 2019-09-10T22:35:44Z
translate from https://stackoverflow.com:/questions/676324/div-background-color-to-change-onhover