CSS：悬停时更改颜色

yuvru6vn 于 2023-05-23 发布在其他

关注(0)|答案(5)|浏览(207)

所以我一直在一个网站上工作，可点击的图像，但我似乎不能得到正确的...: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>

正如你所看到的，我真的试图改变一切的颜色后，悬停，但它似乎并不工作。

css

来源：https://stackoverflow.com/questions/45590887/css-change-color-on-hover

5条答案

按热度按时间

r1wp621o1#

它不起作用，因为图像覆盖了自己的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>

赞(0）回复(0）举报 2023-05-23

xtfmy6hx2#

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

赞(0）回复(0）举报 2023-05-23

wvyml7n53#

尝试使用不透明度，背景不会生效。

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>

赞(0）回复(0）举报 2023-05-23

nxagd54h4#

我现在不能测试，但你可以尝试使用z索引属性。

img {
    margin-top: -10px;
    width: 100%;
    height: auto;
    z-index: 0;
}
a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 10;
}

赞(0）回复(0）举报 2023-05-23

3yhwsihp5#

试试这个：

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

赞(0）回复(0）举报 2023-05-23

我来回答

CSS：悬停时更改颜色

5条答案

相关问题

热门标签

最新问答