CSS：鼠标悬停时改变颜色

Question

CSS：鼠标悬停时改变颜色

3

我一直在开发一个带有可点击图片的网站，但是似乎无法正确使用...: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>

你可以看到，我尝试在鼠标悬停时改变所有内容的颜色，但似乎无效。

- J. Doe

2

当然它不起作用，因为你还没有真正地将任何东西“覆盖”在图像前面 - 你只是在改变图像“后面”的背景颜色。你需要先在图像上方放置一个（伪）元素，然后才能修改该元素的背景。 - CBroe

5个回答

1

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

- Ted Goas

0

我现在无法测试，但你可以尝试使用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;
}

- Linkliman

0

试试这个：

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

- Pankaj Bhandarkar

0

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

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>

- Renzo Calla

谢谢，这个方法可以解决问题，但是在我移除"margin-top:-10px;"后，图片之间出现了白边。你知道有什么解决办法吗？ - J. Doe

很抱歉我没有足够的声望来点赞。 - J. Doe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jberglund · Accepted Answer

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