하위 요소 위로 마우스를 가져갈 때 상위 호버 효과를 일시 중단하는 방법은 무엇입니까?

하위 요소에 마우스를 올리면 부모 마우스 오버 효과가 일시 중지됩니다.

중첩된 경우

요소가 공존하는 경우 하위 요소 위로 마우스를 가져가면 상위 요소에 적용되는 호버 효과가 방해를 받을 수 있습니다. 반대로, 하위 요소 위로 마우스를 가져갈 때 부모 요소에 대한 호버 효과가 비활성화되도록 할 수 있습니다.

CSS 솔루션

JavaScript 없이 이 동작을 달성하려면 영리한 해결 방법이 필요합니다. 형제 요소 사용.

<code class="css">.parent {
  width: 100px;
  height: 100px;
  padding: 50px;
  background: lightgray;
}

.parent:hover {
  background: lightblue;
}

.child {
  height: 100px;
  width: 100px;
  background: darkgray;
}

.child:hover {
  background: lightblue;
}

.sibling {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 50px;
  top: -50px;
  left: -50px;
  background: #3D6AA2;
  transition: background-color 1s;
}

.sibling:hover {
  background: #FFF;
}</code>

<code class="html"><div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div></code>

형제 요소 트릭

형제 요소는 부모 요소 내에 절대적으로 위치하며 부모와 자식 모두와 겹칩니다. 강요. 이는 하위 요소를 구체적으로 대상으로 하지 않는 모든 호버 이벤트를 효과적으로 캡처하기 위해 상위 요소의 경계를 넘어 확장됩니다.

형제 요소를 호버하면 배경색이 흰색으로 변경되어 상위 요소의 호버 효과를 시각적으로 무효화합니다. 하위 요소를 가리키면 자체 호버 효과는 유지되지만 흰색 형제 요소는 상위 요소의 호버 효과를 숨깁니다.

최근 개발

:has( ) 선택기가 이제 존재하므로 특정 하위 항목의 존재를 기반으로 상위 요소를 직접 타겟팅할 수 있습니다. 이 접근 방식을 사용하면 원하는 동작을 보다 우아하게 달성할 수 있습니다.

<code class="css">.parent:has(.child:hover) {
  background: lightgray !important;
}</code>

위 내용은 하위 요소 위로 마우스를 가져갈 때 상위 호버 효과를 일시 중단하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css using this background

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.