为什么 li hover 只覆盖文本部分而不是整个 li 框？

Question

我正在尝试为 li 提供悬停效果，它似乎只覆盖文本部分而不是整个 li-box。我想知道为什么会这样？

*{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
html, body{
margin: 0;
padding: 0;
}

.container {
display: grid;
background-color: rosybrown;
border: 1px solid black;
justify-items: center;
}
.heading{
order: 2;
}

.main-nav{
order:1;
text-align: center;
width: 100%;
border-bottom: 1px solid rebeccapurple;
padding: .5em;
}

.main-nav ul{
 margin:0;
 }
.main-nav li:hover{
background-color: rgba(255,255,255,0.3);
}

 ul{
 padding: 0;
 }
 .main-nav li{
 display: inline;
 margin: 1em;
    
 }

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="trialStyle.css">
 </head>
 <body>
  <div class="container">
    <h1 class="heading">The Love</h1>
    <nav class="main-nav">
        <ul class="ulContainer">
        <li>Home</li>
        <li>About</li>
        <li>Store</li>
    </ul>
    </nav>
 </div>
</body>
   </html>

Answer 1

如果我的解释是正确的，那么您正在尝试让 li 元素覆盖整个栏的高度。如果是这样，问题就是您需要将 li 元素的高度设置为 100%。所以编辑你的 css 脚本看起来像这样：

.main-nav li{
display: inline;
margin: 1em;
height:100%;
}

*基本上文本是整个元素，因为没有设置尺寸所以你必须这样设置它们。

Answer 2

悬停效果仅覆盖文本部分，因为那是呈现的 li 元素的大小。如果你想要一个块的效果，你可以使用 padding 而不是 margin CSS 属性:

参考以下W3学校给定的link

*{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}

html, body{
margin: 0;
padding: 0;
}

.container {
display: grid;
background-color: rosybrown;
border: 1px solid black;
justify-items: center;
}

.heading{
order: 2;
}

.main-nav{
order:1;
text-align: center;
width: 100%;
border-bottom: 1px solid rebeccapurple;
padding: .5em;
}

.main-nav ul{
 margin:0;
 }

.main-nav li:hover{
background-color: rgba(255,255,255,0.3);
}

 ul{
 padding: 0;
 }

 .main-nav li{
 display: inline;
 /*padding: 1em;
 padding-bottom: 0.5em;*/
 padding: .5em;
 }

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="trialStyle.css">
 </head>
 <body>
  <div class="container">
    <h1 class="heading">The Love</h1>
    <nav class="main-nav">
        <ul class="ulContainer">
        <li>Home</li>
        <li>About</li>
        <li>Store</li>
    </ul>
    </nav>
 </div>
</body>
   </html>

CSS Box Model

Answer 3

您可以添加填充以在文本周围提供 space 并在其上显示悬停。

 .main-nav li{
 display: inline;
 margin: 1em;
 padding: 1em;

 }

为什么 li hover 只覆盖文本部分而不是整个 li 框？

Why the li hover is covering only the text part and not the whole li box?

html

css

hover

css-grid