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

使用 css 在鼠标悬停时更改 asp.net 按钮的颜色

CSS:我可以为图像颜色更改悬停效果添加轻松过渡吗?

如何在材质 ui 卡中悬停时更改文本颜色?我想更改卡片悬停时的文本颜色而不是悬停在文本上?

更改嵌套 div 内鼠标悬停时的图层颜色

PrimeReact:悬停时更改菜单栏项目的背景颜色