web-dev-qa-db-fra.com

CSS: survoler un autre élément?

Petite question: Pourquoi le background-color de .b ne change-t-il pas lorsque je survole? .a?

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>

http://jsfiddle.net/2NEgt/

csshover
10
Sven

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 devez avoir des éléments entre .a et .b, vous devrez alors utiliser .a:hover ~ .b, qui fonctionne pour tous les frères et sœurs de .a venant après , pas seulement le suivant. .

Démo http://jsfiddle.net/thebabydino/EajKf/

45
Ana

Ne pouvez-vous pas faire quelque chose comme a:hover + b? voir http://meyerweb.com/eric/articles/webrev/200007a.html

6
Josh

Vous pouvez utiliser + sélecteur

.a:hover + .b {
    background-color: blue;
}

appliquer le css pour l'élément frère, ou 

.a:hover > .b {
    background-color: blue;
}

pour la classe imbriquée.

6
Stano

parce que .b n'est pas un enfant de .a, ce sélecteur ne trouve rien. Utilisez javascript pour faire ce que vous voulez y faire.

3
Tallboy

Il y a deux choses que tu peux faire.

Soit changez votre code HTML pour faire de .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;
}
2
Jrod

pas besoin de js http://jsfiddle.net/2NEgt/3/

1
Nicholas King

Vous ne devriez pas changer le style d'un frère lorsqu'un événement se produit sur un élément différent. C'est hors du contexte de CSS.

Utilisez JavaScript pour y parvenir, 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";
};
0
Madara Uchiha

Jquery est une solution simple et efficace:

html: 

<div class="a">AAA</div>
<div class="b">BBB</div>

script: Mettez ce script dans votre code HTML si vous le souhaitez. C'est tout.

<script>
      $(".a").mouseover(function(){
        $(".b").css("color", "blue"); 
      });
      $(".a").mouseleave(function(){
        $(".b").css("color", "red");
      });
</script>
0
Ivan Carrasco Quiroz

essayez 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;
}

lorsque vous passez la souris sur la case 1, la case 3 devient noire

0
zdifahk