CSS: survolez un autre élément?

Petite question: Pourquoi le background-color de .b ne change pas lorsque je hover? .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/

source d'informationauteur Sven

  1. 44

    Vous avez besoin d'avoir .a:hover + .b au lieu de .a:hover .b

    .a:hover .b serait travailler pour une structure comme

    <div class="a">AAAA
  <div class ="b">BBBB</div>
</div>

    Si, à un certain point, vous aurez besoin d'avoir quelques éléments entre .un et .b, alors vous aurez besoin d'utiliser .a:hover ~ .bqui travaille pour tous les frères et soeurs de .a venir après ilet pas seulement à la prochaine.

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

  2. 6

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

  3. 6

    Vous pouvez utiliser + sélecteur de

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

  4. 3

    parce que .b n'est pas un enfant de .un, de sorte que le sélecteur n'est pas de trouver quoi que ce soit. Utiliser javascript pour faire ce que vous voulez faire.

  5. 2

    Il y a deux choses que vous pouvez faire.

    Soit modifier votre code HTML à faire .b un enfant de .a

    <div id="wrap">
    <div class="a">AAAA
       <div class ="b">BBBB</div>        
    </div>
</div>

    OU

    Modifier votre css pour utiliser le sélecteur adjacent

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

    pas de js nécessaires http://jsfiddle.net/2NEgt/3/

  7. 0

    Vous ne devriez pas changer un frère ou une sœur du style lorsqu'un événement se produit sur un élément différent. C'est dans le contexte de la CSS.

    Utiliser JavaScript pour atteindre cet objectif, 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";
};
  8. 0

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

    lorsque vous passez la souris sur la zone 1 de la zone 3 obtiendrez la couleur noire

  9. 0

    Jquery est une bonne solution à ce problème:

    html:

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

    script:
    Mettre 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>