css 不完全悬停

b4lqfgs4 于 2023-05-30 发布在其他

关注(0)|答案(2)|浏览(111)

<!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，但想在概念上为什么这种不完整的悬停发生和解决方案修复。

css

来源：https://stackoverflow.com/questions/76343678/incomplete-hovering

2条答案

按热度按时间

o8x7eapl1#

悬停状态下的teal颜色覆盖了整个<li>元素。但是这个元素有一个margin。边距创建元素周围的空间，而不是元素内部的空间。它周围的空间不会随着悬停效果而更改颜色。
您可以将<li>上的margin替换为padding，以在元素内添加空格：

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

赞(0）回复(0）举报 2023-05-30

9lowa7mx2#

不完全悬停的发生是因为你的元素“ul”的背景尺寸大于你的“li”元素。每当我们创建这种类型的列表时，我们首先创建一个“ul”元素，然后创建“li”元素，因此它是“ul”的子部分。您需要指定两个元素的大小，并保持li的大小小于ul元素。
希望这能回答你的问题。

赞(0）回复(0）举报 2023-05-30