web-dev-qa-db-fra.com

Comment faire pour que toute la div change de couleur en survol avec css?

J'ai le suivant: 

    <div id="side-menu" class="sidebar-nav span2">
        <div class="sidebar-link"><span>Link 1</span></div>
        <div class="sidebar-link"><span>Link 2</span></div>
    </div>

J'essaie de faire changer la couleur de chacune des deux div lorsque vous passez dessus, que vous survoliez le texte à gauche ou à droite. Actuellement, la couleur ne change que si je survole le texte. Une idée de comment cela peut être fait? Voici mon violon avec css:

http://jsfiddle.net/PTSkR/56/

csscss3
7
SB2055

Vous avez un espace dans le sélecteur de survol. C'est important parce que l'espace est le sélecteur de descendant en CSS

div.sidebar-link :hover{
    background-color: #E3E3E3;
}

Cela signifie que seuls les descendants survolés de .sidebar-link sont concernés par les règles. Supprimer l'espace.

http://jsfiddle.net/ExplosionPIlls/PTSkR/57/

21
Explosion Pills

Vous pouvez y parvenir facilement grâce au code suivant: Link

.cstDiv{
    padding:10px;  /* text-align:center may be used for a good look */
    width:55px;
}

div.cstDiv:hover{
    background-color:gray;    
    color:white;
    cursor:pointer;  /* you may delete this if you want */
}
   <div>
       <div class="cstDiv">Link I</div>
       <div class="cstDiv">Link II</div>
       <div class="cstDiv">Link III</div>
       <div class="cstDiv">Link IV</div>
   </div>

0
primalshade