當滑鼠停留在另一個元素上時，CSS 可以單獨設定一個元素的樣式嗎？

使用CSS 將鼠標懸停在一個元素上以影響另一個元素

問題：

將鼠標懸停在一個元素上實現CSS 效果直接改變附近另一個元素的外觀可能很棘手。儘管嘗試實現這樣的效果，但仍不清楚是否可以純粹透過 CSS 來實現。

答案：

將滑鼠懸停在某個元素上時影響元素外觀的能力使用 CSS 的不同元素受到嚴格限制。事實上，只有當目標元素是觸發元素的後代元素或相鄰同級元素時，才能執行此操作。

後代元素：

如果受影響的元素嵌套在觸發元素內，CSS可用於在懸停時進行操作：

#parent_element:hover #child_element,
#parent_element:hover > #child_element {
  opacity: 0.3;
}

此選擇器會將效果應用於具有以下結構：

<div>
<p><strong>相鄰兄弟：</strong></p>
<p>對於與觸發元素相鄰的兄弟元素，需要不同的方法：</p>
<pre class="brush:php;toolbar:false">#first_sibling:hover + #second_sibling {
  opacity: 0.3;
}

此選擇器將定位以下 HTML中的元素結構：

<div>
<p><strong>限制：</strong></p>
<p>在這兩種情況下，需要注意的是，選擇器中指定的後一個元素是懸停時受影響的元素.</p>
<p><strong>範例：</strong></p>
<p>對於與提供的偽代碼範例類似的場景，可以使用以下CSS 規則：</p>
<pre class="brush:php;toolbar:false">img:hover + img {
  opacity: 0.3;
  color: red;
}

示範此效果的範例可以在提供的 JS Fiddle 中找到：https://jsfiddle.net/