CSS: vol stationnaire sur un autre élément?
brève question: Pourquoi le background-color.b ne change pas quand je plane? <!--4?
CSS
.a {
color: red;
}
.b {
color: orange;
}
.a:hover .b {
background-color: blue;
}
HTML
<div id="wrap">
<div class="a">AAAA</div>
<div class ="b">BBBB</div>
</div>
9 réponses
Vous devez avoir .a:hover + .b au lieu de .a:hover .b
.a:hover .b fonctionnerait pour une structure comme
<div class="a">AAAA
<div class ="b">BBBB</div>
</div>
si à un moment donné vous aurez besoin d'avoir quelques éléments entre .un et .b, alors vous aurez besoin d'utiliser .a:hover ~ .b, qui fonctionne pour les tous les frères et sœurs de .a après, pas seulement le suivant.
Pouvez-vous pas faire quelque chose comme a:hover + b? voir http://meyerweb.com/eric/articles/webrev/200007a.html
Vous pouvez utiliser + sélecteur
.a:hover + .b {
background-color: blue;
}
pour appliquer le css pour l'élément frère, ou
.a:hover > .b {
background-color: blue;
}
pour la classe imbriquée.
parce que .b n'est pas un enfant de .a, donc ce sélecteur ne trouve rien. Utiliser javascript pour faire ce que vous voulez y faire.
Il y a deux choses que vous pouvez faire.
changez votre HTML pour faire .b un enfant de .a
<div id="wrap">
<div class="a">AAAA
<div class ="b">BBBB</div>
</div>
</div>
OR
changez votre css pour utiliser le sélecteur adjacent
.a:hover + .b {
background-color: blue;
}
Vous ne devriez pas changer le style d'un frère ou d'une sœur lorsqu'un événement se produit sur un élément différent. C'est hors du contexte de CSS.
Utilisez JavaScript pour ce faire, par exemple:
var wrap = document.getElementById("wrap");
var aDiv = wrap.getElementsByClassName("a")[0];
var bDiv = wrap.getElementsByClassName("b")[0];
aDiv.onmouseover = function() {
bDiv.style.backgroundColor = "red";
};
aDiv.onmouseout = function() {
bDiv.style.backgroundColor = "white";
};
essayer de comprendre cet exemple:
code html
<p>Hover over 1 and 3 gets styled.</p>
<div id="one" class="box">1</div>
<div id="two" class="box">2</div>
<div id="three" class="box">3</div>
<!--css-->
#one:hover ~ #three{
background-color: black;
color: white;
}
.box {
cursor: pointer;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 5px;
outline: 1px solid black;
text-align: center;
width: 30px;
}
quand vous passez sur la boîte 1 que la boîte 3 aura la couleur Noire
Jquery est une solution bonne et facile:
html:
<div class="a">AAA</div>
<div class="b">BBB</div>
script: Mettez ce script dans votre html si vous voulez. C'est tout.
<script>
$(".a").mouseover(function(){
$(".b").css("color", "blue");
});
$(".a").mouseleave(function(){
$(".b").css("color", "red");
});
</script>