CSS：悬停时更改颜色答案

【问题标题】：CSS: Change color on hoverCSS：悬停时更改颜色
【发布时间】：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" 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>

如您所见，我确实尝试在悬停时将所有内容更改为该颜色，但似乎不起作用。

【问题讨论】：

当然不行，因为你实际上还没有在图像前面“覆盖”任何东西——你只是在改变背景颜色在之后图片。您需要先在图像顶部放置一个（伪）元素，然后您可以修改该元素的背景。

标签： html css image hover background-color

【解决方案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" 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>

【讨论】：

谢谢！也工作了！对不起，我没有足够的代表来投票:(。

【解决方案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"   alt="ascpic">
    </a>
    <a id="fhca" href="fhc.php">
        <img src="http://via.placeholder.com/350x150"   alt="fhcpic"> 
    </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;
}

【讨论】：