問題:
將鼠標懸停在一個元素上實現CSS 效果直接改變附近另一個元素的外觀可能很棘手。儘管嘗試實現這樣的效果,但仍不清楚是否可以純粹透過 CSS 來實現。
答案:
將滑鼠懸停在某個元素上時影響元素外觀的能力使用 CSS 的不同元素受到嚴格限制。事實上,只有當目標元素是觸發元素的後代元素或相鄰同級元素時,才能執行此操作。
後代元素:
如果受影響的元素嵌套在觸發元素內,CSS可用於在懸停時進行操作:
#parent_element:hover #child_element, #parent_element:hover > #child_element { opacity: 0.3; }
此選擇器會將效果應用於具有以下結構:
<div>
相鄰兄弟:
對於與觸發元素相鄰的兄弟元素,需要不同的方法:
#first_sibling:hover + #second_sibling { opacity: 0.3; }
此選擇器將定位以下 HTML中的元素結構:
<div>
限制:
在這兩種情況下,需要注意的是,選擇器中指定的後一個元素是懸停時受影響的元素.
範例:
對於與提供的偽代碼範例類似的場景,可以使用以下CSS 規則:
img:hover + img { opacity: 0.3; color: red; }
示範此效果的範例可以在提供的 JS Fiddle 中找到:https://jsfiddle.net/
以上是當滑鼠停留在另一個元素上時,CSS 可以單獨設定一個元素的樣式嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!