95

我正在尝试在鼠标悬停时更改 div 的背景颜色。

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

只有div 内的链接获得背景颜色。

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

谢谢你

编辑：
如何使整个 div 充当链接 - 当您单击该 div 上的任意位置时，将您带到一个地址。

4

10 回答 10

119

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

只是为了确保，如果您只想更改一个特定的 div，请给它一个 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 回答
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 从红色变为蓝色。

于 2014-05-30T23:38:37.997 回答
5

放

display: block;

在a上并给出一些高度

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

我希望这个能帮上忙

于 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 回答
1

你可以像这样在锚标签中包含 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>

于 2020-01-06T05:37:17.270 回答
0

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

例子：

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