Question

我正试图在鼠标悬停上进行 div的背景颜色更改。

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

中的链接获取背景颜色。

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

谢谢

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

10 个答案:

答案 0 :(得分：106)

“a:hover”字面上告诉浏览器在鼠标悬停在其上时更改<a> - 标记的属性。您可能想要的是“the div:hover”，而这会在选择div时触发。

只是为了确保，如果您只想更改一个特定的div，请为其指定一个ID（“<div id='something'>”），然后使用CSS“#something:hover {...}”。如果要编辑一组div，请将它们组成一个类（“<div class='else'>”）并在这种情况下使用CSS“.else {...}”（注意类名称之前的句点！）< / p>

答案 1 :(得分：40)

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

答案 2 :(得分：19)

没有必要放锚。要在悬停时更改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; }

答案 3 :(得分：16)

要使整个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>
祝你好运！

答案 4 :(得分：10)

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

答案 5 :(得分：5)

集

display: block;

在 a 上并给出一些高度

答案 6 :(得分：3)

只需尝试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>

我希望这会有所帮助

答案 7 :(得分：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; }

答案 8 :(得分：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>

答案 9 :(得分：-1)

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

示例：

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

Answer 1

“a:hover”字面上告诉浏览器在鼠标悬停在其上时更改<a> - 标记的属性。您可能想要的是“the div:hover”，而这会在选择div时触发。

只是为了确保，如果您只想更改一个特定的div，请为其指定一个ID（“<div id='something'>”），然后使用CSS“#something:hover {...}”。如果要编辑一组div，请将它们组成一个类（“<div class='else'>”）并在这种情况下使用CSS“.else {...}”（注意类名称之前的句点！）< / p>

Answer 2

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

Answer 3

没有必要放锚。要在悬停时更改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; }

Answer 4

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

祝你好运！

Answer 5

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

Answer 6

集

display: block;

在 a 上并给出一些高度

Answer 7

只需尝试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>

我希望这会有所帮助

Answer 8

你可以把锚放在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;
}

Answer 9

您可以将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>

Answer 10

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

示例：

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

div背景颜色，改变onhover

10 个答案: