부모 위에 마우스를 올릴 때 스타일 하위 요소

155

부모 요소 위에 마우스를 올리면 자식 요소의 스타일을 변경하는 방법 가능한 경우 CSS 솔루션을 선호합니다. : hover CSS selectors를 통해 가능한 해결책이 있습니까? 실제로 패널에 호버가 있으면 패널 내부의 옵션 막대 색상을 변경해야합니다.

모든 주요 브라우저를 지원하려고합니다.

css css-selectors

— 라자 트 굽타
소스

273

예, 확실히 할 수 있습니다. 그냥 같은 것을 사용하십시오

.parent:hover .child {
   /* ... */
}

이 페이지 에 따르면 모든 주요 브라우저에서 지원됩니다.

— jtbandes
소스

8

감사합니다. CSS3를 사용하여 웹 페이지에 활기를 불어 넣었습니다.

— 닉 타 라스

1

마지막으로 도움을 주셔서 감사합니다. 이것은 자녀를 원한다면 모든 자손에게 적용됩니다 .parent:hover > .child.

— William T. Mallard

8

예, 아래 코드를 사용하면 도움이 될 수 있습니다.

.parentDiv{
margin : 25px;

}
.parentDiv span{
  display : block;
  padding : 10px;
  text-align : center;
  border: 5px solid #000;
  margin : 5px;
}

.parentDiv div{
padding:30px;
border: 10px solid green;
display : inline-block;
align : cente;
}

.parentDiv:hover{
  cursor: pointer;
}

.parentDiv:hover .childDiv1{
border: 10px solid red;
}

.parentDiv:hover .childDiv2{
border: 10px solid yellow;
} 
.parentDiv:hover .childDiv3{
border: 10px solid orange;
}

<div class="parentDiv">
<span>Hover me to change Child Div colors</span>
  <div class="childDiv1">
    First Div Child
  </div>
  <div class="childDiv2">
    Second Div Child
  </div>
  <div class="childDiv3">
    Third Div Child
  </div>
  <div class="childDiv4">
    Fourth Div Child
  </div>
</div>

스 니펫 확장

— 이크발 파샤
소스

10

그래서 늦게 파티

— Dherya

4

이 답변은 일부 설명에서 도움이 될 것입니다. 여기에 필요한 것보다 더 많은 코드가 있고 우리가 집중해야 할 코드의 부분이 명확하지 않은 것 같습니다.

— Paul Rooney