悬停不使用背景图像答案

【问题标题】：hover not working with a background image悬停不使用背景图像
【发布时间】：2020-01-10 03:30:21
【问题描述】：

我有一个带有背景图片的网站，但是当我添加一个 CSS 导航栏时，悬停标签不起作用。悬停元素在没有背景图像的情况下工作，但是当我添加背景图像时，它会消失

这是我的代码

html

<!DOCTYPE html>
<html>
<head>
    <title>Cool</title>
    <link href="stylesheet.css" "type= "text/css" rel= "stylesheet">
    <link rel="icon" type="image/png" href="icon2.jpg"/>
</head>
<body>
    <div id="background-image">
    <div id="background-overlay">
    <h1>Cool</h1>
            <h2>Vertical Navigation Bar</h2>

            <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
            </ul>

            <p>hi</p>
    </div>
    </div>  
</body>
</html>

CSS

*{
z-index:-8;
}
body{
margin:0px;
}
#backround-image{
background-image:url("background.jpg");
background-size:cover;
background-position:center center;
position:relative;
top: 0;
bottom :0;
height: 100vh;
z-index: -10;
}
#backround-overlay{
position: absolute;
background-color: rgba(0,0,0,0.5);
top: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index:-9;
}
h1{
text-align:center;
font-family:arial black;


}
l{
float:left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

/* Change the link color on hover */
li a:hover{
background-color: red;
color: black;
}

感谢您的帮助

托马斯

【问题讨论】：

在您的 CSS 包含中，type 之前有一个额外的 "。这可能会引发语法错误，导致您的 CSS 无法加载。此外，您的 CSS 中有一个 l 选择器（浮动到左侧），这可能意味着 li。
^虽然是真的，但这不是他的问题。在 codepen 中，我可以重现问题。
我不确定这是否是您正在寻找的，但我只是将背景图像放在身体上，它似乎工作正常。 jsfiddle.net/szoevqaL

标签： html css hover background-image

【解决方案1】：

如果你删除 position: relative;从背景图像问题得到解决并且不会引起任何奇怪。目前这似乎是不必要的样式。

【讨论】：

【解决方案2】：

如果元素之前已经有背景，则似乎悬停在元素背景上不起作用。然而，如果你想改变元素的背景，你可以改变它的亮度、色调、饱和度。这是一个例子：

          li a:hover {
             filter: brightness(50%);
          }

【讨论】：

【解决方案3】：

最简单的方法：

`background-blend-mode: color-burn;`

【讨论】：