하위 요소를 호버링할 때 상위 요소의 스타일을 지정하는 방법은 무엇입니까?

하위 요소를 호버링할 때 상위 요소의 스타일을 지정하는 방법은 무엇입니까?

CSS 부모 선택기가 존재하지 않는다는 것은 알고 있지만, 그러한 선택기 없이 자식 요소를 호버링할 때 양육 요소를 스타일링할 수 있습니까?

예를 들어, 삭제 버튼을 선택하면 삭제하려는 요소가 강조 표시됩니다.

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

순수 CSS를 사용하여 마우스가 버튼 위에 있을 때 이 섹션의 배경색을 변경하는 방법은 무엇입니까?

오래된 질문이라는 것을 알지만, 저는 가짜 아이 없이 (하지만 가짜 포장지) 겨우 그렇게 할 수 있었습니다.

하면 no로 합니다.pointer-events그 다음엔 어린아이div와 함께pointer-events로 설정한.auto효과가 있습니다.
:<img>태그(예:)는 트릭을 수행하지 않습니다.
또한설야합니다해정합을 설정하는 것을 기억하세요.pointer-eventsauto이벤트 수신기가 있는 다른 어린이의 경우, 그렇지 않으면 클릭 기능이 손실됩니다.

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}    

<div class="parent">
  parent - you can hover over here and it won't trigger
  <div class="child">hover over the child instead!</div>
</div>

Shadow Wizard가 친절하게도 언급했듯이, IE10 이하에서는 이것이 작동하지 않을 것이라고 언급할 가치가 있습니다. (이전 버전의 FF와 Chrome도 여기 참조)

이 질문은 이전에도 여러 번 제기되었으며 일반적인 짧은 답변은 다음과 같습니다.순수 CSS로는 할 수 없습니다.이름으로 되어 있습니다.계단식 스타일 시트는 계단식 방향의 스타일만 지원하며 위쪽은 지원하지 않습니다.

그러나 이러한 효과를 원하는 대부분의 상황에서는 주어진 예와 같이 이러한 계단식 특성을 사용하여 원하는 효과에 도달할 가능성이 여전히 있습니다.이 유사 마크업을 고려해 보십시오.

<parent>
    <sibling></sibling>
    <child></child>
</parent>

비결은 형제자매에게 부모와 같은 크기와 위치를 주고 부모 대신 형제자매에게 스타일을 주는 것입니다.이것은 부모가 스타일이 된 것처럼 보일 것입니다!

자, 그럼 형제자매를 어떻게 꾸밀까요?

아이를 호잉할 때 부모도 마찬가지지만 형제는 그렇지 않습니다.형제도 마찬가지입니다.이것은 형제자매를 스타일링하기 위한 세 가지 가능한 CSS 선택기 경로로 끝납니다.

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

이러한 다양한 경로를 통해 몇 가지 좋은 가능성이 있습니다.예를 들어, 질문의 예제에서 이 트릭을 해제하면 다음과 같은 오류가 발생합니다.

div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}

분명히, 대부분의 경우 이 속임수는 부모와 동일한 크기를 형제에게 주고 자식이 부모 내에 나타나도록 하는 절대 위치 지정의 사용에 달려 있습니다.

트리 메뉴에서 여러 번 트릭을 구현하는 이 피들에 표시된 것처럼 특정 요소를 선택하기 위해 보다 정규화된 선택기 경로를 사용해야 하는 경우가 있습니다.꽤 괜찮은 것 같아요.

(오래된 질문에 대한) 또 다른 간단한 "대체" 접근법.
요소를 형제로 배치하고 다음을 사용합니다.

인접 형제 선택기()+ 또는 일반 형제 선택기()~

<div id="parent">
  <!-- control should come before the target... think "cascading" ! -->
  <button id="control">Hover Me!</button>
  <div id="target">I'm hovered too!</div>
</div>

#parent {
  position: relative;
  height: 100px;
}

/* Move button control to bottom. */
#control {
  position: absolute;
  bottom: 0;
}

#control:hover ~ #target {
  background: red;
}

데모 피들입니다.

2022년:

이것은 이제 의사 클래스와 다음 식을 사용하여 CSS에서만 달성할 수 있습니다.

div:has(button:hover) {}

다음은 원래의 제안을 보여주는 토막글입니다.

div:has(button:hover) {
  background-color: cyan;      
}

<div>
  <p>Lorem ipsum ...</p>
  <button>Delete</button>
</div>

여기에서 브라우저 지원을 참조하십시오.작성 당시, 여전히 결함이 있는 실험적 구현이 있는 Firefox를 제외한 모든 주요 브라우저가 이를 지원합니다.

선택한 자식의 부모를 선택하기 위한 CSS 선택기가 없습니다.

자바스크립트로 할 수 있습니다.

앞에서 언급했듯이 "선택한 자식의 부모를 선택하기 위한 CSS 선택기가 없습니다."

그래서 당신은 다음 중 하나:

• NGLN의 답변에 설명된 대로 CSS 해킹을 사용합니다.
• jQuery와 함께 Javascript를 사용합니다.

---

다음은 Javascript/jQuery 솔루션의 예입니다.

Javascript 측면:

$('#my-id-selector-00').on('mouseover', function(){
  $(this).parent().addClass('is-hover');
}).on('mouseout', function(){
  $(this).parent().removeClass('is-hover');
})

그리고 CSS 쪽에는 다음과 같은 것이 있습니다.

.is-hover {
  background-color: red;
}

이 솔루션은 설계에 따라 완전히 달라지지만, 자녀를 호버링할 때 배경을 변경하려는 부모 div가 있는 경우 다음을 사용하여 부모 div를 모방할 수 있습니다.::after/::before.

<div class="item">
    design <span class="icon-cross">x</span>
</div>

CSS:

.item {
    background: blue;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}
.item span.icon-cross:hover::after {
    background: DodgerBlue;
    border-radius: 10px;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
}

여기에서 전체 바이올린 예제 보기

이것은 Sass에서 매우 쉽게 할 수 있습니다!이것을 위해 자바스크립트를 파고들지 마세요.& Selector insass는 정확히 이렇게 합니다.

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand

언급URL : https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element