操縱非懸停元素的不透明度
在HTML 標記中,您可以動態調整所有清單項目(LI) 的不透明度,除了目前懸停的那個。這種技術會產生一種效果,即未懸停的元素變得微妙透明,而懸停的項目仍然完全可見。
要實現此目的,可以利用CSS:
ul:hover li { opacity: 0.5; } ul li:hover { opacity: 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中文網其他相關文章!