CSS div 背景颜色，改变悬停
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/676324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div background color, to change onhover
提问by Ionu? G. Stan
I'm trying to make a div's background color change on mouse over.
我正在尝试在鼠标悬停时更改 div 的背景颜色。
the div {background:white;}
the div a:hover{background:grey; width:100%;
display:block; text-decoration:none;}
div {background:white;}
div a:hover{background:grey; 宽度：100%；
显示：块；文字装饰：无；}
onlythe linkinside the div gets the background color.
只有div 内的链接获得背景颜色。
what could I do to make the whole div get that background color?
我该怎么做才能使整个 div 获得该背景颜色？
thank you
谢谢你
EDIT :
how can I make the whole div to act as a link - when you click anywhere on that div, to take you to an address.
编辑：
我怎样才能让整个 div 作为一个链接 - 当你点击那个 div 上的任何地方时，把你带到一个地址。
回答by Henrik Paul
The "a:hover" literally tells the browser to change the properties for the <a>-tag, when the mouse is hovered over it. What you perhaps meant was "the div:hover" instead, which would trigger when the div was chosen.
当鼠标悬停在 -tag 上时，" a:hover" 字面意思是告诉浏览器更改<a>-tag的属性。您的意思可能是“ the div:hover”，它会在选择 div 时触发。
Just to make sure, if you want to change only one particular div, give it an id ("<div id='something'>") and use the CSS "#something:hover {...}" instead. If you want to edit a group of divs, make them into a class ("<div class='else'>") and use the CSS ".else {...}" in this case (note the period before the class' name!)
只是为了确保，如果你只想改变一个特定的 div，给它一个 id (" <div id='something'>") 并使用 CSS " #something:hover {...}" 代替。如果你想编辑一组 div，把它们变成一个类（“ <div class='else'>”）并.else {...}在这种情况下使用 CSS“ ”（注意类名前的句点！）
回答by Real Red.
Using Javascript
使用 JavaScript
<div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
Hyman and Jill went up the hill
To fetch a pail of water.
Hyman fell down and broke his crown,
And Jill came tumbling after.
</div>
回答by Virsj Bhorania
There is no need to put anchor. To change style of div on hover then Change background color of div on hover.
没有必要放锚。要在悬停时更改 div 的样式，然后在悬停时更改 div 的背景颜色。
<div class="div_hover"> Change div background color on hover</div>
In .css page
在 .css 页面中
.div_hover { background-color: #FFFFFF; }
.div_hover:hover { background-color: #000000; }
回答by Virsj Bhorania
To make the whole div act as a link, set the anchor tag as:
要使整个 div 充当链接，请将锚标记设置为：
display: block
And set your height of the anchor tag to 100%. Then set a fixed height to your div tag. Then style your anchor tag like usual.
并将锚标记的高度设置为 100%。然后为你的 div 标签设置一个固定的高度。然后像往常一样设计你的锚标签。
For example:
例如：
<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>
Good luck!
祝你好运！
回答by user3689455
html code:
html代码：
<!DOCTYPE html>
<html>
<head><title>this is your web page</title></head>
<body>
<div class = "nicecolor"></div>
</body>
</html>
css code:
css代码：
.nicecolor {
color:red;
width:200px;
height:200px;
}
.nicecolor:hover {
color:blue;
}
and thats how youll change your div from red to blue by hovering over it.
这就是将鼠标悬停在 div 上将其从红色更改为蓝色的方法。
回答by Jamol
Set
放
display: block;
on aand give some height
在a 上并给出一些高度
回答by Tajveer Singh Nijjar
simply try "hover" property of CSS. eg:
只需尝试 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>
i hope this will help
我希望这个能帮上忙
回答by Nicki
You can just put the anchor around the div.
您可以将锚点放在 div 周围。
<a class="big-link"><div>this is a div</div></a>
and then
进而
a.big-link {
background-color: 888;
}
a.big-link:hover {
background-color: f88;
}
回答by trickymind
you could just contain the div in anchor tag like this:
您可以像这样在锚标记中包含 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>回答by T-Jayanth Dore
Just make the property !importantin your css file so that background color doesnot change on mouse over.This worked for me.
只需!important在您的 css 文件中创建该属性，这样鼠标悬停时背景颜色就不会改变。这对我有用。
Example:
例子：
.fbColor {
background-color: #3b5998 !important;
color: white;
}
