web-dev-qa-db-fra.com

faire passer la souris sur <li> l'élément </li> aussi changer la couleur du texte ... Astuce CSS?

J'ai quelques barres de menu et pour le moment, l'arrière-plan devient noir lorsque vous survolez un

 <li>content</li>

et le texte passe du noir au blanc lorsqu'il est survolé.

Je dois faire en sorte que la couleur du texte change lorsque l'ensemble <li>content</li> est survolé, pas seulement lorsque le texte est mis en surbrillance.

voici le css

 <style type="text/css">
    body{margin:0px; font-family:Tahoma, Sans-Serif; font-size:13px;}
    /* dock */
    #dock{margin:0px; padding:0px; list-style:none; position:fixed; top:0px; height:100%; 
          z-index:100; background-color:; left:0px;}
    #dock > li {width:40px; height:120px; margin: 0 0 1px 0; background-color:#;
                 background-repeat:no-repeat; background-position:left center;}

    #dock #Menu {background-image:url(Menu.png);}

    #dock > li:hover {background-position:-40px 0px;}

    /* panels */
    #dock ul li {padding:5px; border: solid 0px #879b17;}
    #dock ul li:hover {padding:5px;
background:#879b17 url(item_bkg.png) repeat-x;
border: solid 0x #879b17;
font-weight: bold;
color: #000;
 }
    #dock ul li.header, #dock ul li .header:hover {
background:#fff url(header_bkg.png) repeat-x;
border:solid 10px #879b17;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: #FFF;
font-weight: bold;
text-align: center;
 }

    #dock > li:hover ul {
display:block;
color: #FFF;
 }
    #dock > li ul {position:absolute; top:0px; left:-180px;  z-index:-1;width:180px; display:none;
                   background-color:#fff; border:solid 10px #000; border-top-left-radius: 20px; border-top-right-radius: 20px; padding:0px; margin:0px; list-style:none;}
    #dock > li ul.docked { display:block;z-index:-2;}

    .dock,.undock{}
   .undock {display:none; }
    #content {margin: 10px 0 0 60px; }

     body,td,th {
color: #333;
 }
 a:link {
color: #000;
text-decoration: none;
 }
 a:visited {
text-decoration: none;
color: #000;
 }
 a:hover {
text-decoration: underline;
color: #FFF;
 }
 a:active {
text-decoration: none;
color: #FFF;
text-align: center;
 }
     #dock #Menu .free .header .dock {
color: #FFF;
font-weight: bold;
 }
     #dock #Menu .free .header .undock {
color: #FFFFFF;
 }
</style>

et voici le HTML

 <li id="Menu">
             <ul class="free">
               <li class="header"><a href="#" class="dock">DOCK</a><a href="#"      class="undock">UN-DOCK</a></li>
                 <li> </li>
               <li class="header">CAMPAIGNS</li>
                 <li><a href="#">Link Data</a></li>
                 <li><a href="#">Search</a></li>                
                 <li><a href="#">Summary Sheet</a></li>                                
               <li><a href="#">Add New Client</a></li>
               <li class="header">LINKS</li>
                 <li><a href="#">Record Transactions</a></li>
               <li class="header">REPORTS</li>
                 <li><a href="#">Handover Sheets</a></li>
                 <li><a href="#">Handover Summary</a></li>
               <li class="header" >MAINTENANCE</li>
                 <li><a href="#">Logout</a></li>
                 <li><a href="#">Manage Users</a></li>                
           </ul>
         </li>

Merci d'avance si vous pouvez nous aider

Cordialement

Henri

htmlcsshtml-lists
9
Henry Aspden

Je recommanderais que le survol fonctionne sur les éléments "A" au lieu des éléments LI.

Afin de rendre les éléments LI volants cliquables, vous devez définir l'élément 'A' en son sein pour afficher: bloc (ou bloc en ligne) comme les balises 'A' sont affichées: en ligne par défaut.

ALORS...

<ul>
 <li><a href="#">My Link</a></li>
</ul>

ul li a {
 display:block;
}

ul li a:hover, ul li a:focus {
 color:red;
}
25
Billy Moat

J'ai trouvé que si vous utilisez un rembourrage pour le "a" au lieu du "li" cela fonctionne bien. En bloquant le rembourrage, vous pouvez ensuite survoler la zone rembourrée dans la division et les liens "a" à l'intérieur (qui sont rembourrés) planeront leur propre couleur.

ul li a{
color:#ead6b7;
display:block;
text-decoration:none;
padding:16px;
}

ul{
list-style-type:none;
}

li{
display:inline-block;
}

ul li a:hover{
color:#332419;
display:block;
text-decoration:none;
}

li:hover{
background-color:#ead6b7;
}
7
Jayson