Html 将鼠标悬停在 <li>item</li> 上也会更改文本颜色... CSS 技巧？

make hover on <li>item</li> change text colour too... CSS trick?

提问by Henry Aspden

I have some menu bars, and at the moment, the Background changes to black when hovering over an

我有一些菜单栏，目前，当鼠标悬停在

 <li>content</li>

and the text changes from black to white when it is hovered over.

当鼠标悬停在上面时，文本会从黑色变为白色。

I need to make it so the text color changes when the whole <li>content</li>is hovered, not just when the the text is highlighted.

我需要使它在整个<li>content</li>悬停时文本颜色发生变化，而不仅仅是在突出显示文本时。

here is the css

这是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>

and here is the HTML

这是 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>

Thanks in advance if you are able to help

如果您能提供帮助，请提前致谢

Regards

问候

Henry

亨利

回答by Billy Moat

I'd recommend making the hover work on the 'A' elements instead of the LI elements.

我建议在“A”元素而不是 LI 元素上进行悬停。

In order to make the LI elements flly clickable you need to set the 'A' element within it to display:block (or inline-block) as 'A' tags are display:inline by default.

为了使 LI 元素可点击，您需要将其中的 'A' 元素设置为 display:block（或 inline-block），因为默认情况下，'A' 标签是 display:inline。

SO...

所以...

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

ul li a {
 display:block;
}

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

回答by Jayson

I found that if you use padding for the "a" instead of the "li" it works well. By blocking out the padding you can then hover over the padded area within the div and the "a" links inside (that are padded) will hover a color of their own.

我发现，如果您对“a”而不是“li”使用填充，则效果很好。通过屏蔽填充，您可以将鼠标悬停在 div 内的填充区域上，内部的“a”链接（已填充）将悬停在它们自己的颜色上。

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