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：改变颜色悬停

回答

相关问题