如何使用 CSS 突出顯示活動選單項目同時調暗非活動選單項目？

如何突出顯示活動選單項目並調暗非活動選單項目

在此程式碼片段中，我們遇到了一個想要調暗選單項目的場景當父選單(

) 懸停時所有選單項目(
• 元素) 的不透明度。但是，懸停的選單項目本身應保持完全不透明。

  CSS 解

  為了實現此效果，我們利用CSS 動態調整選單的不透明度items:

  ul:hover li {
    opacity: 0.5;
  }
  ul li:hover {
    opacity: 1;
  }

  解釋：

  • 第一條規則(ul:hover li) 對所有
  • 應用 0.5 的不透明度。當其父級
    時的元素懸停。這會使目前未懸停的選單項目變暗。
  • 第二條規則 (ul li:hover) 將
  • 的不透明度重設為 1。實際懸停在其上的元素。這可確保目前選單項目保持完全可見。

  範例

  考慮以下HTML 和CSS 程式碼：

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  
  <style>
    li {
      float: left;
      width: 33.33%;
      line-height: 50px;
      background: gray;
      list-style-type: none;
    }
    ul:hover li {
      opacity: 0.5;
    }
    ul li:hover {
      opacity: 1;
    }
  </style>

  當您將滑鼠懸停在

  上時元素，所有
  • 除您懸停的元素之外的元素將變為50% 透明，而懸停的
  • 將變為 50% 透明。元素將保持完全不透明。這會建立微妙的突出顯示效果，引導使用者到達活動選單項目。

以上是如何使用 CSS 突出顯示活動選單項目同時調暗非活動選單項目？的詳細內容。更多資訊請關注PHP中文網其他相關文章！