자식 요소를 가리킬 때 부모 요소의 스타일을 지정하는 방법은 무엇입니까?

CSS 부모 선택기 가 존재하지 않는다는 것을 알고 있지만 그러한 선택 기가없는 자식 요소를 가리킬 때 부모 요소를 스타일 지정할 수 있습니까?

예를 들면 다음과 같습니다. 마우스를 가져 가면 삭제 될 요소를 강조 표시 하는 삭제 버튼 을 고려하십시오 .

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

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

글쎄,이 질문은 여러 번 전에 요청되었으며 일반적인 대답은 다음과 같습니다. 순수한 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}

분명히, 대부분의 경우이 트릭은 형제와 부모와 같은 크기를 제공하기 위해 절대 위치를 사용하는 것에 달려 있습니다.

트리 메뉴에서 트릭을 여러 번 구현하는 이 바이올린에 표시된 것처럼 특정 요소를 선택하려면 더 한정된 선택기 경로를 사용해야하는 경우가 있습니다 . 정말 좋습니다.

나는 그것이 오래된 질문이라는 것을 알고 있지만 의사 아이 (그러나 의사 래퍼)없이 그렇게했습니다.

더 함께하지 않으려면 부모 설정하면 pointer-events다음 아이를 div함께 pointer-events설정하려면 auto, 그것을 작동합니다 :)
합니다 <img>(예를 들어) 태그 트릭을하지 않습니다.
또한 자신의 이벤트 리스너가있는 다른 어린 이용 으로 설정 pointer-events해야 auto합니다. 그렇지 않으면 클릭 기능이 손실됩니다.

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>

편집 :
로 그림자 마법사가 친절하게주의 :이 아래 IE10 및이하지 않습니다 일을 언급 할 가치가있다. (구 버전의 FF 및 Chrome도 여기를 참조 하십시오 )

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

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

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

데모 피들 여기 .

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

JavaScript로 할 수 있습니다

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

그래서 당신도 :

• NGLN의 답변에 설명 된대로 CSS 핵을 사용하십시오.
• jQuery와 함께 javascript 사용

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

자바 스크립트 측면에서 :

$('#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가있는 경우 ::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: "";
}

전체 바이올린 예제를 참조하십시오.

순수한 CSS 솔루션이 필요없는 사람들을위한 간단한 jquery 솔루션 :

    $(".letter").hover(function() {
      $(this).closest("#word").toggleClass("hovered")
    });

.hovered {
  background-color: lightblue;
}

.letter {
  margin: 20px;
  background: lightgray;
}

.letter:hover {
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="word">
  <div class="letter">T</div>
  <div class="letter">E</div>
  <div class="letter">S</div>
  <div class="letter">T</div>
</div>

이것은 Sass에서 매우 쉽습니다! 이를 위해 JavaScript를 탐구하지 마십시오. sass의 & 선택기는 정확하게 이것을 수행합니다.

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