상위 항목을 호버링할 때 스타일 하위 요소

상위 항목을 호버링할 때 스타일 하위 요소

상위 요소에 호버링이 있을 때 하위 요소의 스타일을 변경하는 방법.가능하다면 CSS 솔루션을 선호합니다.:hover CSS selectors를 통해 가능한 솔루션이 있습니까?실제로 패널에 호버가 있을 때 패널 내부의 옵션 바 색상을 변경해야 합니다.

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

예, 확실히 할 수 있습니다.

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

이것은 일치하는 요소로 제한하기 위해 의사 클래스를 사용합니다..parent하위 조합(공간)을 선택하여 일치하는 하위 조합을 선택할 수도 있습니다..child.

다음은 실제 예입니다.

.parent {
  border: 1px dashed gray;
  padding: 0.5em;
  display: inline-block;
}

.child {
  border: 1px solid brown;
  margin: 1em;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background: #cef;
  transform: scale(1.5) rotate(3deg);
  border: 5px inset brown;
}

<div class="parent">
  parent
  <div class="child">
    child
  </div>
</div>

네, 아래 코드를 이용하시면 도움이 될 것 같습니다.

.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>

이것도 사용할 수 있습니다.

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

허용된 솔루션이 정확한 경우, 호버 스타일이 모두 적용됩니다.parent그리고.child요소.부모가 "상자" 안에 자식을 포함하고 있기 때문입니다.

부모가 있을 때만 자식 요소에 스타일을 적용하는 방법에 대해 궁금한 사람이 있다면 다음을 시도해 보십시오.

.parent {
    height: 100px;
    width: 100px;

    background-color: blue;
}

.parent:hover .child {
    background-color: red;
}

.child {
    height: 100px;
    width: 100px;
    margin-left: 100px;

    background-color: green;
    pointer-events: none; /* this line does the trick */
}

<div class="parent">
    <div class="child"></div>
</div>

언급URL : https://stackoverflow.com/questions/7217244/style-child-element-when-hover-on-parent