Cách thay đổi kiểu phần tử con khi có di chuột vào phần tử cha. Tôi muốn một giải pháp CSS cho việc này nếu có thể. Có giải pháp nào khả thi thông qua: bộ chọn CSS di chuột. Trên thực tế tôi cần thay đổi màu của thanh tùy chọn bên trong bảng điều khiển khi có bảng di chuột trên bảng.
Tìm cách để hỗ trợ tất cả các trình duyệt chính.
Câu trả lời:
Vâng, bạn chắc chắn có thể làm điều này. Chỉ cần sử dụng một cái gì đó như
.parent:hover .child {
/* ... */
}Theo trang này, nó được hỗ trợ bởi tất cả các trình duyệt chính.
.parent:hover > .child?
Có, bạn có thể làm điều này bằng cách sử dụng mã dưới đây, nó có thể giúp bạn.
.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>