<!DOCTYPE html>
<html>
<head>
<style>
ul {
background-color: tomato;
}
li {
display: inline-block;
height: 20px;
width: 50px;
margin: 10px;
}
a {
color: white;
}
li:hover {
cursor: pointer;
background-color: teal;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#news">About</a></li>
</ul>
</body>
</html>I am trying to get hovering effect on say home element which correspondingly starts vertically above home element ( *** right*** from top of red box) to below(bottom of red box) , but as of now incomplete hovering is shown as per code snippet.
I seen some answers but cant understand and of course use flexbox but wanted to conceptually why this incomplete hovering happens and solution fix.
>Solution :
The teal color on the hover state is covering the entirety of the <li> element as expected. But that element has a margin. A margin creates space around an element, not within an element. That space around it does not change color with the hover effect.
You can replace the margin on the <li> with padding instead to add space within the element:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
background-color: tomato;
}
li {
display: inline-block;
height: 20px;
width: 50px;
padding: 10px; /* <--- here */
}
a {
color: white;
}
li:hover {
cursor: pointer;
background-color: teal;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#news">About</a></li>
</ul>
</body>
</html>