중첩된 DIV에서 하위 요소 위로 마우스를 가져갈 때 상위 호버 효과를 방지하는 방법은 무엇입니까?

중첩된 DIV: 하위 항목을 가리킬 때 부모에 대한 호버 효과 비활성화

이 시나리오에는 " .parent" 및 ".child" ".parent" 위로 마우스를 가져가면 배경색이 변경되기를 원합니다. 그러나 ".child" 위로 마우스를 가져가면 ".parent"가 기본 회색 배경으로 되돌아가기를 원합니다.

상위 및 하위 마우스 오버 효과를 위한 CSS 코드:

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

문제:

위의 CSS 코드는 ".parent"와 ".child" 모두에 원하는 호버 효과를 성공적으로 적용했습니다. 그러나 ".child"를 마우스로 가리키면 ".parent"에 대한 마우스 오버 효과를 비활성화해야 하는 요구 사항은 다루지 않습니다.

형제 요소를 사용하는 솔루션:

결과적으로 CSS는 중첩된 요소를 사용하여 이러한 효과를 얻을 수 있는 직접적인 방법을 제공하지 않습니다. 그러나 형제 요소를 사용하여 영리한 해결 방법을 사용할 수 있습니다.

1. ".parent" 컨테이너 내부에 ".sibling" 클래스를 사용하여 새 DIV 형제를 추가합니다.
2. " .sibling" 요소를 사용하여 'top' 및 'left' CSS 속성을 사용하여 ".child" 요소를 덮습니다.
3. ".sibling"이 ".sibling" 위에 표시되도록 하려면 더 높은 'z-index' 값을 설정하세요. child."
4. ".parent."에 적용한 것과 동일한 배경색 전환 효과를 ".sibling"에 추가합니다.

형제 요소로 업데이트된 CSS:

<code class="css">.parent {
  ... (unchanged)
}

.child {
  ... (unchanged)
}

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

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

작동 방식:

".child" 위에 마우스 커서를 올리면 ".child"의 배경색이 변경됩니다. 동시에 ".sibling"의 배경색도 적용된 호버 효과로 인해 변경됩니다. ".sibling"이 ".child"를 덮기 때문에 배경색 변경은 ".parent"에 적용된 호버 효과를 효과적으로 재정의합니다. 이는 ".parent"에 대한 호버 효과가 비활성화된 듯한 착각을 불러일으킵니다.

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