CSS：在懸停時更改顏色
[英]CSS: Change color on hover
問題描述
因此，我一直在使用可點擊圖片的網站上工作，但我似乎無法正確使用...: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" 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>
如您所見，我確實在懸停時嘗試將所有顏色更改為該顏色，但是它似乎不起作用。
5 個解決方案
解決方案1
1 2017-08-09 12:45:03
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>
解決方案2
1 2017-08-09 12:57:35
它不起作用，因為圖像覆蓋了自己的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" 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>
解決方案3
0 已采納 2017-08-09 12:40:17
嘗試使用不透明度，背景將不會生效。
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" alt="ascpic"> </a> <a id="fhca" href="fhc.php"> <img src="http://via.placeholder.com/350x150" alt="fhcpic"> </a>
解決方案4
0 2017-08-09 12:40:42
我現在無法測試，但是您可以嘗試使用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
0 2017-08-09 12:45:54
試試這個：
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懸停時更改顏色
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.