다른 요소 위로 마우스를 가져갈 때 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/