Üst öğede fareyle üzerine gelindiğinde alt öğenin stilini değiştirme. Mümkünse bunun için bir CSS çözümünü tercih ederim. Aşağıdakiler yoluyla mümkün olan herhangi bir çözüm var mı: vurgulu CSS seçicileri. Aslında panelde bir vurgulu olduğunda panelin içindeki seçenekler çubuğunun rengini değiştirmem gerekiyor.
Tüm büyük tarayıcıları desteklemek istiyor.
Yanıtlar:
Evet, kesinlikle yapabilirsiniz. Sadece şunun gibi bir şey kullan
.parent:hover .child {
/* ... */
}Bu sayfaya göre, tüm büyük tarayıcılar tarafından desteklenmektedir.
.parent:hover > .child?
Evet, bunu size yardımcı olabilecek aşağıdaki kodu kullanarak yapabilirsiniz.
.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>bunu da kullanabilirsin
.parent:hover * {
/* ... */
}