需要帮助个性化我的CSS导航栏：如何< li>在鼠标悬停时突出显示该元素？

jjjwad0x 于 2023-06-07 发布在其他

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

我试图使一个简单的navbar，我设法使基地，但当我试图个性化，我被卡住。
我的目标是，当鼠标在每个元素（home等）上移动时，它会像一个盒子一样突出显示，但目前它只突出显示我尝试过的<a>，而不是持有它的<li>。
我正试图使<li>成为一个可以点击和突出显示的锚，类似于堆栈的导航栏。

.nav-top {
  background: rgb(151, 138, 63);
  margin: 0;
  padding: 1rem 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav-item {
  list-style: none;
  margin-right: 1.2rem;
  padding: 5px 10px;
}

.nav-top ul {
  margin: 0 auto;
  padding: 0;
  list-style: none
}

.nav-top li:hover {
  display: block
}

.nav-top a:hover {
  background: #F2F2F2;
  color: #444444;
}

.nav-item a {
  text-decoration: none;
  color: white;
  width: 100px;
}

.nav-item:first-child {
  margin-right: auto;
  margin-left: 2rem;
}

.nav-item a:hover {
  color: aqua;
}

<navbar>
  <ul class="nav-top">
    <li class="nav-item"><label class="logo">LoremX</label></li>
    <li class="nav-item"><a href="index.html">Home</a></li>
    <li class="nav-item"><a href="#">About</a></li>
    <li class="nav-item" id="contact"><a href="#">Contact</a></li>
  </ul>
</navbar>

css

来源：https://stackoverflow.com/questions/76387183/need-help-personalizing-my-css-navbar-how-do-i-highlight-the-li-element-on-mo

2条答案

按热度按时间

vngu2lb81#

li的唯一:hover声明是display: block的默认值，而颜色更改声明仅针对a。然而，我相信你试图达到的效果是更好地完成了使锚块级与填充。
与悬停效果无关，只是更正你的标记：

您有.nav-top ul选择器，但该示例不包括嵌套的ul
我怀疑你误用了label元素。
navbar不是一个HTML元素，我怀疑您需要nav

.nav-top {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: rgb(151, 138, 63);
}

.logo {
  margin-right: auto;
  margin-left: 2rem;
  padding: 5px 10px;
  align-self: center;
}

.nav-item {
  margin-right: 1.2rem;
  padding: 5px 10px;
}

.nav-item a {
  display: block;
  padding: .5em;
  text-decoration: none;
  color: white;
}

.nav-item a:hover {
  color: aqua;
  background: #F2F2F2;
}

<nav>
  <ul class="nav-top">
    <li class="logo">LoremX</li>
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><a href="#">About</a></li>
    <li class="nav-item" id="contact"><a href="#">Contact</a></li>
  </ul> 
</nav>

赞(0）回复(0）举报 2023-06-07

dy2hfwbg2#

只需在锚元素中添加填充和边框

.nav-item a {
  text-decoration: none;
  color: white;
  width: 100px;
  padding: 10px;
  border-radius: 10px;
}

赞(0）回复(0）举报 2023-06-07

我来回答

需要帮助个性化我的CSS导航栏：如何< li>在鼠标悬停时突出显示该元素？

2条答案

相关问题

热门标签

最新问答