hover not working with a background image
Question
I have a website with a background image but when I add a css navigation bar the hover tag doesn't work. the hover element works with out the back ground image but when i add the background image it dosent
here's my code
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;
}
thanks for any help
Thomas
3 answers
solution1
0 2017-04-02 22:48:24
If you remove position: relative; from background-image the issue is resolved and doesn't cause any weirdness. At the moment this appears to be unnecessary styling.
solution2
0 2019-04-12 11:11:41
It seems like hovering doesn't work on element background if the element already had a background before. However, if you want to change the element's background you can do it with changing it's brightness, hue, saturation. Here is an example:
li a:hover {
filter: brightness(50%);
}
solution3
0 2020-01-09 19:30:21
最简单的方法：
`background-blend-mode: color-burn;`
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.