CSS：改變顏色懸停

所以我一直在一個網站上點擊圖片，但我似乎無法得到...:hover的權利。我希望圖片可以用0.1不透明的白色覆蓋。CSS：改變顏色懸停

<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>

正如你所看到的，我真的試圖在懸停時改變所有顏色，但它似乎不起作用。

來源

2017-08-09 J. Doe

當然，它不起作用，因爲你實際上沒有在圖像的前面放置任何「over」，你只是改變圖像背景顏色。您需要首先在圖像上放置一個（僞）元素，然後您可以修改該元素的背景。 – CBroe

嘗試使用不透明，背景將不會生效..

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>

來源

2017-08-09 12:40:17

謝謝，這工作，但我也有刪除「margin-top：-10px;」後圖像之間的白色邊框。你有任何機會知道修補程序嗎？ –

對不起，我沒有足夠的代表能夠upvote。 –

woops，顯示塊工作。 –

我現在不能測試，但你可以嘗試使用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; 
}

來源

2017-08-09 12:40:42 Linkliman

的問題與你的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>

來源

2017-08-09 12:45:03

試試這個：

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; 
}

來源

2017-08-09 12:45:54

它不起作用，因爲圖像覆蓋了自己的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>

來源

2017-08-09 12:57:35 jberglund

Thx！工作也！對不起，我沒有足夠的代表upvote :(。 –

沒問題。它開心的結果。 – jberglund

CSS：改變顏色懸停

回答

相關問題