如何使用 CSS 使非懸停列表項目半透明？

操縱非懸停元素的不透明度

在HTML 標記中，您可以動態調整所有清單項目(LI) 的不透明度，除了目前懸停的那個。這種技術會產生一種效果，即未懸停的元素變得微妙透明，而懸停的項目仍然完全可見。

要實現此目的，可以利用CSS：

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

在此程式碼片段中：

• 第一行將所有LI（懸停項目除外）的不透明度降低到50%，使它們出現半透明。
• 第二行確保懸停的 LI 保留不透明度 1，且保持不透明。

HTML 範例：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS樣式：

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

li {
  width: 100px;
  height: 100px;
  background-color: gray;
  margin-right: 10px;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

結果：

當您將老鼠停留在LI 上時，其不透明度將保持為1，而所有其他LI 將變為半透明度透明的。這為當前活動元素提供了視覺提示。

以上是如何使用 CSS 使非懸停列表項目半透明？的詳細內容。更多資訊請關注PHP中文網其他相關文章！