使整个元素成为导航栏中的可点击区域

Question

在下面的代码中，当我将鼠标悬停在 Home/About/Contact/Popular 帖子等导航项上时，只有 <a> 的部分获得背景颜色。

但我希望整个主页块在悬停时突出显示。

与我的 flexbox 同时，我希望我的额外 space 分布在列表项之间，如下所示。

html {
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  font-size: 1.5em;
  display: inline-block;
  color: rgb(250, 250, 250);
}

nav {
  background: rgba(10, 10, 10, 0.9);
  border: 5px solid rgba(150, 175, 200, 0.4);
  max-width: 700px;
  margin: 0 auto;
}

nav>ul {
  padding: 0;
  margin: 0;
  display: flex;
}

nav>ul>li {
  list-style: none;
  flex: 1;
}

nav>ul>li>a {
  padding: 10px;
}

nav>ul>li :hover {
  background: rgb(240, 100, 100);
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Popular Posts</a></li>
  </ul>
</nav>

Answer 1

简单的制作

nav > ul :hover {
    background : rgb(240, 100, 100);
}

它应该可以工作（去掉 li）

Answer 2

这是你错过的吗？ :

 nav > ul > li > a {
  display: block;
}

下面的演示

html {
  font-size: 16px;
}
* {
  box-sizing: border-box;
}
a {
  text-decoration: none;
  font-size: 1.5em;
  display: inline-block;
  color: rgb(250, 250, 250);
}
nav {
  background: rgba(10, 10, 10, 0.9);
  border: 5px solid rgba(150, 175, 200, 0.4);
  max-width: 700px;
  margin: 0 auto;
}
nav > ul {
  padding: 0;
  margin: 0;
  display: flex;
}
nav > ul > li {
  list-style: none;
  flex: 1;
}
nav > ul > li > a {
  padding: 10px;
  display: block;
}
nav > ul > li:hover {
  background: rgb(240, 100, 100);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0">
  <title>Nav BAr</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <nav>
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">About</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
      <li><a href="#">Popular Posts</a>
      </li>

    </ul>

  </nav>

</body>

</html>

Answer 3

方法一

去掉nav周围的边框：

nav {   
    background: rgba(10,10,10,0.9);
    /* border: 5px solid rgba(150,175,200,0.4); <---- REMOVE */
    max-width: 700px;
    margin: 0 auto;
}

我假设当您说 "complete block" 和 "entire flex item" 时，您的意思是将鼠标悬停在所有内容上。但是如果你还想要边框，就忽略上面的步骤。

方法#2

将 display: block 添加到 a 个元素：

nav > ul > li > a {
    padding: 10px;
    display: block; /* NEW */
}

默认情况下，锚元素只会扩展其内容的长度。通过使其成为块元素，它将扩展其容器的整个宽度。

html {
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  font-size: 1.5em;
  display: inline-block;
  color: rgb(250, 250, 250);
}

nav {
  background: rgba(10, 10, 10, 0.9);
  /* border : 5px solid rgba(150,175,200,0.4); */
  max-width: 700px;
  margin: 0 auto;
}

nav>ul {
  padding: 0;
  margin: 0;
  display: flex;
}

nav>ul>li {
  list-style: none;
  flex: 1;
}

nav>ul>li>a {
  padding: 10px;
  display: block;
}

nav>ul>li :hover {
  background: rgb(240, 100, 100);
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Popular Posts</a></li>
  </ul>
</nav>

使整个元素成为导航栏中的可点击区域

Make entire element a clickable area in navigation bar

html

css

flexbox