Html 不完整的悬停

发布于05月27日

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

我试图在home元素上获得悬停效果，该元素相应地从home元素的上方垂直开始(从红框顶部的*向右*)到下方(红框的底部)，但到目前为止，未完成的悬停如代码片段所示.

我看到了一些答案，但我不能理解，当然使用了FlexBox，但我想从概念上解释为什么会发生这种不完整的悬停和解决方案修复.

推荐答案

正如预期的那样，悬停状态上的teal色覆盖了<li>元素的全部.但这一元素的得分是margin.空白处创建around个元素，而不是within个元素.它周围的空间不会随着悬停效果而改变 colored颜色 .

您可以将<li>上的margin替换为padding，以在元素中添加空格within:

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