選單項目的懸停效果涵蓋整個頁面高度

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