CSS:悬停时更改颜色
Posted
技术标签:
【中文标题】CSS:悬停时更改颜色【英文标题】:CSS: Change color on hover 【发布时间】:2018-01-17 08:32:12 【问题描述】:所以我一直在研究一个带有可点击图像的网站,但我似乎无法正确获取...:hover
。我希望图片被白色覆盖,不透明度为 0.1。
<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" >
</a>
<a id="fhca" href="fhc.php">
<img src="Pictures/fhyper.png" >
</a>
</body>
</html>
如您所见,我确实尝试在悬停时将所有内容更改为该颜色,但似乎不起作用。
【问题讨论】:
当然不行,因为你实际上还没有在图像前面“覆盖”任何东西——你只是在改变背景颜色在之后图片。您需要先在图像顶部放置一个(伪)元素,然后您可以修改该元素的背景。 【参考方案1】:它不起作用,因为图像覆盖了它自己的background-color
。有几种方法可以实现您所追求的效果,但最简单和最直接的方法是在锚标签上使用background-color
,并在悬停时更改图像的不透明度。
<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" >
</a>
<a id="fhca" href="fhc.php">
<img src="Pictures/fhyper.png" >
</a>
</body>
</html>
【讨论】:
谢谢!也工作了!对不起,我没有足够的代表来投票:(。【参考方案2】:您的 CSS 的问题是悬停时设置的背景颜色在前景图像之后,并且永远不可见,因为前景图像阻挡了它。
保持您当前的 HTML,如果您将 CSS 更新为类似的内容,它将达到您想要的效果。 (值得注意的 CSS 注释)
<style>
body padding: 0; margin: 0;
img
margin-top: -10px;
width: 100%;
height: auto;
a
background-color: #fff; /* Give the <a> tag a white background */
a:hover img
opacity: .9; /* reduce the transparency of the foreground image by 10%, allowing the white background to show through 10%. */
</style>
【讨论】:
【参考方案3】:尝试使用不透明度,背景不会生效..
body padding: 0; margin: 0;
img
margin-top: -10px;
width: 100%;
height: auto;
a:hover img
opacity:0.2;
#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);
<a id="asca" href="asc.php">
<img src="http://via.placeholder.com/350x150" >
</a>
<a id="fhca" href="fhc.php">
<img src="http://via.placeholder.com/350x150" >
</a>
【讨论】:
谢谢,这行得通,但在删除“margin-top:-10px;”后,图像之间也有白色边框。你知道解决办法吗? 抱歉,我没有足够的代表来投票。【参考方案4】:我现在无法测试,但您可以尝试使用 z-index 属性。
img
margin-top: -10px;
width: 100%;
height: auto;
z-index: 0;
a:hover
background-color: rgba(255, 255, 255, 0.1);
z-index: 10;
【讨论】:
【参考方案5】:试试这个:
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;
【讨论】:
以上是关于CSS:悬停时更改颜色的主要内容,如果未能解决你的问题,请参考以下文章
当 div 悬停时更改锚文本颜色 - CSS 或 jQuery