如何使清單項目除懸停的項目之外的項目半透明？

實現懸浮元素以外的元素的部分不透明度

本次調查的目的是探索選擇性降低元素不透明度的可能性，專門列出項目(li)，同時排除目前懸停的項目。此效果模擬突顯懸停元素的視覺提示。

使用CSS 解

為了實現此行為，我們利用級聯樣式表(CSS)規則：

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

解釋

• 第一條規則將懸停父列表(ul) 元素內的所有清單項目的不透明度設定為 0.5，使得它們是半透明的。
• 第二條規則覆蓋懸停清單項目的前一條規則，恢復其不透明度設為 1，有效地使其不透明。

實現

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

li {
  float: left;
  width: 33.33%;
  line-height: 50px;
  background: grey;
  list-style-type: none;
}
ul:hover li {
  opacity: 0.5;
}
ul li:hover {
  opacity: 1;
}

此演示說明了所需的效果，其中除當父列表元素懸停時，當前懸停的元素會顯示為半透明。懸停的項目保持完全不透明，突出其存在。

以上是如何使清單項目除懸停的項目之外的項目半透明？的詳細內容。更多資訊請關注PHP中文網其他相關文章！