Ion*_*tan 89 css background colors hover
我试图在鼠标悬停时使div的背景颜色发生变化.
div {background:white;}
div a:hover {background:grey; 宽度:100%;
显示:块; 文字修饰:无;}
只有 div中的链接才能获得背景颜色.
我该怎么做才能使整个div获得背景颜色？
谢谢
编辑:
如何让整个div作为一个链接 - 当你点击该div上的任何地方,带你到一个地址.
Hen*_*aul 111
当鼠标悬停在标签上时," a:hover"字面上告诉浏览器更改<a>-tag 的属性.您可能想要的是" the div:hover",而选择div时会触发.
只是为了确保,如果你只想改变一个特定的div,给它一个id(" <div id='something'>")并使用CSS" #something:hover {...}".如果你想编辑一组div,在这种情况下将它们变成一个类(" <div class='else'>")并使用CSS" .else {...}"(注意类名称之前的句号!)
Rea*_*ed. 42
使用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>
小智 21
没有必要放锚.要在悬停时更改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; }
小智 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>
祝好运!
小智 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从红色变为蓝色,将其悬停在它上面.