Question

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

但我希望完整的Home Block在悬停时突出显示。

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 1

简单地做到

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

它应该有用（取出li）

Answer 2

这是你错过的吗？：

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

下面的演示

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 3

方法＃1

删除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;
}

我假设当你说＆＃34;完成阻止＆＃34;和＆＃34;整个弹性项目＆＃34;你的意思是将鼠标悬停在一切上但如果您仍然想要边框，请忽略上面的步骤。

方法＃2

将display: block添加到a元素：

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

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

3 个答案: