CSS가 다른 요소 위로 마우스를 가져가면 요소의 속성을 변경할 수 있습니까?

다른 요소 위에 마우스를 올려 놓을 때 고유 요소에 영향

별도의 요소를 마우스로 가리킬 때 요소의 속성을 변경할 수 있나요? 이 쿼리는 CSS만을 사용하여 이 동작을 달성하는 방법을 탐구합니다.

CSS의 고유 기능으로 하위 항목이 아니거나 인접한 형제 항목을 타겟팅하는 것을 방지하지만 이것이 가능한 특정 시나리오가 있습니다.

하위 항목

영향을 받은 요소가 마우스를 올린 요소의 하위 요소인 경우 CSS 선택기는 효과적으로 다음을 수행할 수 있습니다. 다음을 사용하여 대상 지정:

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

예를 들어 마우스 오버 시 "parent_element" 내의 "child_element"를 대상으로 합니다:

<div>
<p><strong>인접 형제</strong></p> <p>인접한 형제자매를 타겟팅하려면 약간 다른 방법이 필요합니다. 접근 방식:</p>
<pre class="brush:php;toolbar:false">#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

"first_sibling" 위에 마우스를 올리면 "second_sibling"에 영향을 미칩니다.

<div>
<p><strong>귀하의 사례 구현</strong></p>
<p>고려 귀하의 샘플에서는 비슷한 것을 목표로 삼을 가능성이 높습니다. 대상:</p>
<pre class="brush:php;toolbar:false">img:hover + img {
    opacity: 0.3;
    color: red;
}

첫 번째 이미지 위에 마우스를 올리면 두 번째 이미지에 영향을 줍니다.

데모

[이 JS Fiddle 데모]를 방문하세요. (여기에 데모 링크 삽입) 대화형 예시를 살펴보세요.