Question 176994 in Html Question posted in
Some basic documentation can be found here.

Html – Incomplete hovering

<!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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    The incomplete hovering is happening because the background size of your element which is "ul" is more than your "li" element. Whenever we make this type of list we first create a "ul" element and then the "li" element so it’s a subpart of the "ul".You need to mention the size of both elements and keep the size of li smaller than the ul element.

    Hope this answers your question.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search