菜单项的悬停效果覆盖整个页面高度

Question

我正在开发左侧导航。我希望悬停时红色条出现在菜单项之前。它适用于“主页”项目及其子项目，但其他根项目会导致悬停时红色条从上到下跨越页面的整个宽度。

$(document).foundation();

.vertical.dropdown.menu [href] > i {
  display: block;
}

.vertical.dropdown.menu [href] {
  display: block;
  text-align: center;
}

.left-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 150px;
  height: 100%;
  color: #333;
  background: #FFFFFF;
}

.left-bar .vertical.menu.nested {
  padding: 0;
}

.left-bar [href] > i {
  display: block;
}

.left-bar [href] {
  display: block;
  text-align: left;
  padding: 0;
  color: #333;
}

.left-bar [href]:hover {
  background: #9B9B9BFF;
}

.left-bar .vertical.menu > li {
  position: relative;
  background: #FFFFFF;
  color: #333;
  border: 0;
}


.left-bar .top-level-item [href]:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.1/js/foundation.min.js"></script>
<ul class="vertical dropdown menu left-bar" data-dropdown-menu>
  <li class="top-level-item">
    <a href="#">
      <i class="zmdi zmdi-home zmdi-hc-3x"></i>
      <span>Home</span>
    </a>
    <ul class="vertical menu nested">
      <li><a href="#"><i class="zmdi zmdi-list zmdi-hc-3x"></i> Sub Item 1</a></li>
      <li><a href="#"><i class="zmdi zmdi-list zmdi-hc-3x"></i> Sub Item 2</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li class="top-level-item">
    <a href="#">
      <i class="zmdi zmdi-account zmdi-hc-3x"></i>
      <span>Account</span>
    </a>
  </li>
  <li class="top-level-item">
    <a href="#">
      <i class="zmdi zmdi-settings zmdi-hc-3x"></i>
      <span>Settings</span>
    </a>
  </li>
  <li class="top-level-item">
    <a href="#">
      <i class="zmdi zmdi-help-outline zmdi-hc-3x"></i>
      <span>Help</span>
    </a>
  </li>
  <!-- ... -->
</ul>

如何修复它，使红条仅跨越菜单项的高度？

Answer 1

我对 CSS 进行了更改，并在那里添加了注释。基于 DOM 结构的 CSS 选择器存在问题

.left-bar.vertical.menu li 而不是 .left-bar .vertical.menu > li ，我删除了空格和 > ，以便所有 li 现在都具有相对位置

$(document).foundation();

.vertical.dropdown.menu [href] > i {
  display: block;
}

.vertical.dropdown.menu [href] {
  display: block;
  text-align: center;
}

.left-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 150px;
  height: 100%;
  color: #333;
  background: #FFFFFF;
}

.left-bar .vertical.menu.nested {
  padding: 0;
}

.left-bar [href] > i {
  display: block;
}

.left-bar [href] {
  display: block;
  text-align: left;
  padding: 0;
  color: #333;
}

.left-bar [href]:hover {
  background: #9B9B9BFF;
}

/* I made a change here */
.left-bar.vertical.menu  li {
  position: relative;
  background: #FFFFFF;
  color: #333;
  border: 0;
}


.left-bar .top-level-item [href]:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: red;
}

sssccc
sssccc

• Home
  • Sub Item 1
  • Sub Item 2
• Account
• Settings
• Help

Answer 2

我为红色留了一个边框；最初设置为白色。

我做了更改：

• 剪掉所有不需要的CSS，包括所有与位置相关的CSS 东西
• 使用类代替一些 [href] 我认为“脆弱”
• 更改为具体的background-color以清晰
• 设置 0 边框，然后添加左侧边框的细节
• 使用 rem 而不是 px ，因为典型的浏览器使用 16px = 1rem 大小基础；如果需要，您可以强制支持那些不这样做的人。

如果您希望容器继续具有边框并使用 CSS 执行一些与此相关的操作，则可以决定子项目，如下所示： 悬停子元素时如何设置父元素的样式？ 或者也许使用一些简单的 JavaScript 来提供帮助。

$(document).foundation();

.nav-item {
  width: 10rem;
  background-color: #FFFFFF;
  text-align: center;
  color: #333;
  border: 0;
  border-left-width: 0.25rem;
  border-left-style: solid;
  border-left-color: #FFFFFF;
}

.nav-item:hover {
  border-left-color: #FF0000;
}

.nav-item .nav-link:hover {
  background-color: #9B9B9BFF;
}

.nav-link {
  color: #333333;
}

.nav-link * {
  display: block;
}

sssccc
sssccc

• Home
  • Sub Item 1
  • Sub Item 2
• Account
• Settings
• Help