Html CSS：悬停时更改颜色
所以我一直在开发一个有可点击图片的网站，但我似乎无法正确使用Html CSS：悬停时更改颜色,html,css,image,hover,background-color,Html,Css,Image,Hover,Background Color,所以我一直在开发一个有可点击图片的网站，但我似乎无法正确使用…：hover。我希望图片被白色覆盖，不透明度为0.1 <html> <head> <style> body {padding: 0; margin: 0;} img { margin-top: -10px; width: 100%; height: auto; }
…：hover<html>
<head>
<style>
body {padding: 0; margin: 0;}
img {
margin-top: -10px;
width: 100%;
height: auto;
}
a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
#asca:hover {background-color: rgba(255, 255, 255, 0.1);}
#fhca:hover {background-color: rgba(255, 255, 255, 0.1);}
#asca img:hover {background-color: rgba(255, 255, 255, 0.1);}
#fhca img:hover {background-color: rgba(255, 255, 255, 0.1);}
</style>
</head>
<body>
<a id="asca" href="asc.php">
<img src="Pictures/chevcorvette4kp.png" width="4096" height="900" alt="ascpic">
</a>
<a id="fhca" href="fhc.php">
<img src="Pictures/fhyper.png" width="4096" height="900" alt="fhcpic">
</a>
</body>
</html>
正文{填充：0；边距：0；}
img{
利润上限：-10px；
宽度：100%；
高度：自动；
}
a:悬停{
背景色：rgba（255，255，255，0.1）；
}
#asca:悬停{背景色：rgba（255，255，255，0.1）；}
#fhca:悬停{背景色：rgba（255，255，255，0.1）；}
#asca img:悬停{背景色：rgba（255，255，255，0.1）；}
#fhca img:悬停{背景色：rgba（255，255，255，0.1）；}
正如你所看到的，我真的试图在悬停时将所有内容更改为该颜色，但似乎不起作用。尝试使用不透明度，背景不会生效
body{padding:0；margin:0；}
img{
利润上限：-10px；
宽度：100%；
高度：自动；
}
a:悬停img{
不透明度：0.2；
}
#asca:悬停{背景色：rgba（255，255，255，0.1）；}
#fhca:悬停{背景色：rgba（255，255，255，0.1）；}
#asca img:悬停{背景色：rgba（255，255，255，0.1）；}
#fhca img:hover{背景色：rgba（255，255，255，0.1）；}我现在无法测试，但您可以尝试使用z索引属性
img {
margin-top: -10px;
width: 100%;
height: auto;
z-index: 0;
}
a:hover {
background-color: rgba(255, 255, 255, 0.1);
z-index: 10;
}
CSS的问题是，悬停时设置的背景色位于前景图像的后面，并且永远不可见，因为前景图像阻止了它 保持当前HTML，如果您将CSS更新为类似的内容，它将达到您想要的效果。（值得注意的CSS评论）
正文{填充：0；边距：0；}
img{
利润上限：-10px；
宽度：100%；
高度：自动；
}
a{
背景色：#fff；/*为标签提供白色背景*/
}
a:悬停img{
不透明度：.9；/*将前景图像的透明度降低10%，允许白色背景显示10%*/
}
a {
position:relative;
overflow:hidden;
}
a:before{
content: "";
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(255, 255, 255, 0.78);
opacity: 0;
transition:all ease .3s;
}
a:hover:before {
opacity:1;
}
它无法工作，因为图像覆盖了自己的背景色。有几种方法可以实现您想要的效果，但最简单、最直接的方法是在锚定标记上使用
背景色，并在悬停时更改图像的不透明度
<html>
<head>
<style>
body {padding: 0; margin: 0;}
img {
margin-top: -10px;
width: 100%;
height: auto;
}
#asca,
#fhca {
background-color: rgb(255,255,255);
}
#asca:hover img,
#fhca:hover img {
opacity: 0.9;
}
</style>
</head>
<body>
<a id="asca" href="asc.php">
<img src="Pictures/chevcorvette4kp.png" width="4096" height="900" alt="ascpic">
</a>
<a id="fhca" href="fhc.php">
<img src="Pictures/fhyper.png" width="4096" height="900" alt="fhcpic">
</a>
</body>
</html>
正文{填充：0；边距：0；}
img{
利润上限：-10px；
宽度：100%；
高度：自动；
}
#asca，
#fhca{
背景色：rgb（255255）；
}
#asca：悬停img，
#fhca：悬停img{
不透明度：0.9；
}
当然，这不起作用，因为你还没有在图像前面“覆盖”任何东西——你只是在改变图像后面的背景颜色。您需要先在图像顶部放置一个（伪）元素，然后才能修改该元素的背景。谢谢，这很有效，但在删除“边距顶部：-10px；”后，图像之间也有一个白色边框。你知道有什么办法吗？对不起，我没有足够的代表可以投票。谢谢！我也工作了！对不起，我没有足够的代表投票：（。
<html>
<head>
<style>
body {padding: 0; margin: 0;}
img {
margin-top: -10px;
width: 100%;
height: auto;
}
#asca,
#fhca {
background-color: rgb(255,255,255);
}
#asca:hover img,
#fhca:hover img {
opacity: 0.9;
}
</style>
</head>
<body>
<a id="asca" href="asc.php">
<img src="Pictures/chevcorvette4kp.png" width="4096" height="900" alt="ascpic">
</a>
<a id="fhca" href="fhc.php">
<img src="Pictures/fhyper.png" width="4096" height="900" alt="fhcpic">
</a>
</body>
</html>