CSS에서 자식 위로 마우스를 가져갈 때 부모에 대한 마우스 오버 효과를 비활성화하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS에서 자식 위로 마우스를 가져갈 때 부모에 대한 마우스 오버 효과를 비활성화하는 방법은 무엇입니까?

DDD

풀어 주다： 2024-11-03 20:12:29

원래의

356명이 탐색했습니다.

How to Disable Hover Effect on Parent When Hovering Over Child in CSS?

자식에 대한 호버 효과가 부모에 대한 호버 효과를 비활성화합니다

문제:

두 개의 중첩된

요소 위에 마우스를 올려 놓으면 상위 요소인 .parent의 배경을 변경하려고 합니다. 그러나 하위 요소 .child 위로 마우스를 가져가면 상위 요소의 배경이 원래 상태로 되돌아가기를 원합니다.

해결책:

순수한 CSS를 사용하면 이전에는 다음이 불가능했습니다. 이 효과를 직접 달성하십시오. 그러나 최근 2024년에 :has 선택기가 도입되면서 이제 이 문제를 해결할 수 있습니다.

<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;
}

/* The solution using the :has selector */
.parent:has(.child:hover) {
  background: lightgray;
}</code>

로그인 후 복사

호버가 있는 하위 요소가 있는 상위 요소를 타겟팅하면 호버를 효과적으로 비활성화할 수 있습니다. 하위 항목을 가리키면 상위 요소에 영향을 미칩니다.

이전의 제한된 솔루션(2024년 이전):

:has 선택기를 도입하기 전에는 형제 요소를 사용하여 다음을 수행하는 것이 해결 방법이었습니다. 비슷한 효과를 얻습니다.

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

.child {
  height: 100px;
  width: 100px;
  background: #355E95;
  transition: background-color 1s;
  position: relative;
  top: -200px;
}

.child:hover {
  background: #000;
}

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

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

로그인 후 복사

이 접근 방식에는 하위 요소 위에 위치하는 형제 요소를 만드는 것이 포함되었습니다. 아이에게 마우스를 올리면 형제의 배경색이 바뀌어 부모의 배경이 효과적으로 숨겨집니다.

위 내용은 CSS에서 자식 위로 마우스를 가져갈 때 부모에 대한 마우스 오버 효과를 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!