我正在尝试在鼠标悬停时更改 div 的背景颜色。
div {background:white;}
div a:hover{background:grey;宽度:100%;
显示：块；文字装饰：无；}
只有 div 内的链接 获取背景颜色。
我可以做些什么来让整个 div 获得该背景颜色？
谢谢
编辑：
如何使整个 div 充当链接 - 当您单击该 div 上的任意位置时，将您带到一个地址。
【问题讨论】：
标签： css colors background hover
“a:hover”字面意思是告诉浏览器在鼠标悬停在<a>-标签上时更改其属性。您的意思可能是“the div:hover”，它会在选择 div 时触发。
只是为了确保，如果您只想更改一个特定的 div，请给它一个 id ("<div id='something'>") 并改用 CSS "#something:hover {...}"。如果要编辑一组 div，请将它们放入一个类（“<div class='else'>”）并在这种情况下使用 CSS“.else {...}”（注意类名称前的句点！）
【讨论】：
使用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>【讨论】：
没有必要放锚。然后在悬停时更改 div 的样式 更改悬停时 div 的背景颜色。
.div_hover {
background-color: #FFFFFF;
}
.div_hover:hover {
background-color: #000000;
}<div class="div_hover"> Change div background color on hover</div>【讨论】：
要使整个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>
祝你好运！
【讨论】：
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 从红色变为蓝色。
【讨论】：
设置
display: block;
在a上并给出一些高度
【讨论】：
只需尝试 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>
我希望这会有所帮助
【讨论】：
你可以把锚放在 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;
}
【讨论】：
你可以像这样在锚标签中包含 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>【讨论】：
只需在您的 css 文件中创建属性 !important，这样鼠标悬停时背景颜色就不会改变。这对我有用。
例子：
.fbColor {
background-color: #3b5998 !important;
color: white;
}
【讨论】：