The problem is that the buttons (as well as all other elements) are being given a background image due to the CSS having * {….}.
Background images take precedence over background-color so even when you hover the background-image carries on being shown (well, only a tiny part of it as the buttons are small).
Change the * for body (if that’s where you want the background-image to be).
While we are looking at the code, I believe your unordered list children should be li elements, not a elements so they should look like this:
<li><a href="#">Home</a></li>
this reordering should also mean that the CSS for hovering on those elements should also now work.
I am trying to give a hover effect on two buttons. So, I put two buttons over a background image. The problem is I coded hover for those buttons but they are showing the change. But, when I hide the background image the hover effect is working perfectly. Please tell me what mistake I am doing?
simplified HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harry Fitness</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container top-container">
<div class="left">
<img src="logo.jpg" alt="">
</div>
<div class="mid">
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>Products</li></a>
<a href="#"><li>Calender</li></a>
<a href="#"><li>About Us</li></a>
</ul>
</div>
<div class="right">
<button class="btn">Call Us Now</button>
<button class="btn">Email Us</button>
</div>
</div>
</body>
</html>
Here is my css coding:
*{
margin: 0px;
padding: 0px;
background-image: url(athletic-young-female-runner-jogger-stylish-sportswear-running-against-blank-
wall-having-concentrated-focused-look-going-win-sprint-endurance-race.jpg);
background-size: 2000px 1000px ;
background-repeat: no-repeat;
color: black
}
.left{
display: inline-block;
border: 2px solid red;
position: absolute;
}
.left img{
height: 100px;
width: 110px;
}
.mid{
margin-top: 20px;
border: 2px solid green;
display: inline-block;
width: 33%;
position: absolute;
margin-left: 600px;
font-size: 20px;
}
.mid li{
list-style: none;
float: left;
margin-left: 50px;
}
.mid li a:hover{
background-color: white;
}
.right{
margin-top: 20px;
display: inline-block;
position: absolute;
right: 34px;
top:22px
border: 2px solid yellow;
}
.btn{
margin: 0px 9px;
border-radius: 10px;
padding: 10px 10px;
background-color: blanchedalmond;
cursor: pointer;
font-size: 15px;
}
Here I used the hover effect below. but the background color is not changing. I tried in multiple browser but it’s not working.
.btn:hover{
background-color: rgb(31, 30, 30);
}
Then I tried the hover effect hiding the background image. The code is below.
*{
margin: 0px;
padding: 0px;
/* background-image: url(athletic-young-female-runner-jogger-stylish-sportswear-running-against-blank-wall-having-concentrated-focused-look-going-win-sprint-endurance-race.jpg);
background-size: 2000px 1000px ; */
background-repeat: no-repeat;
color: black
}
.btn{
margin: 0px 9px;
border-radius: 10px;
padding: 10px 10px;
background-color: blanchedalmond;
cursor: pointer;
font-size: 15px;
}
.btn:hover{
background-color: rgb(31, 30, 30);
}
This time it worked. The hover effect is working. The background color of the buttons are changed.
But, I want both the background image visible and the hover effect still work. Please help me out through this problem.
seems to be working fine. what exactly is the problem?
