Html 使悬停在<；李>；项目</李>；改变文字颜色太。。。CSS把戏？

我有一些菜单栏，现在，当鼠标悬停在屏幕上时，背景变成黑色

 <li>content</li>

内容

文本悬停在上方时会从黑色变为白色

我需要使文本颜色在整个

内容

悬停时发生变化，而不仅仅是文本高亮显示时

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

正文{margin:0px；字体系列：Tahoma，无衬线；字体大小：13px；}
/*码头*/
#停靠{边距：0px；填充：0px；列表样式：无；位置：固定；顶部：0px；高度：100%；
z索引：100；背景色：；左：0px；}
#dock>li{宽度：40px；高度：120px；边距：01px0；背景色：#；
背景重复：不重复；背景位置：左中心；}
#dock#菜单{背景图像：url（Menu.png）；}
#dock>li:悬停{背景位置：-40px 0px；}
/*面板*/
#dock ul li{填充：5px；边框：实心0px879b17；}
#码头ulli：悬停{填充：5px；
背景：879b17url（item_bkg.png）repeat-x；
边框：实心0x#879b17；
字体大小：粗体；
颜色：#000；
}
#停靠ul li.标题，#停靠ul li.标题：悬停{
背景：#fff url（header_bkg.png）repeat-x；
边框：实心10px#879b17；
边框左上半径：10px；
边框右上角半径：10px；
颜色：#FFF；
字体大小：粗体；
文本对齐：居中；
}
#船坞>李：悬停{
显示：块；
颜色：#FFF；
}
#dock>li ul{位置：绝对；顶部：0px；左侧：-180px；z索引：-1；宽度：180px；显示：无；
背景色：#fff；边框：实心10px#000；边框左上半径：20px；边框右上半径：20px；填充：0px；边距：0px；列表样式：无；}
#dock>li ul.docked{display:block；z-index:-2；}
.dock、.undock{}
.undock{显示：无；}
#内容{边距：10px 0 0 60px；}
正文，td，th{
颜色：#333；
}
a:链接{
颜色：#000；
文字装饰：无；
}
a:参观了{
文字装饰：无；
颜色：#000；
}
a:悬停{
文字装饰：下划线；
颜色：#FFF；
}
a:主动的{
文字装饰：无；
颜色：#FFF；
文本对齐：居中；
}
#停靠#菜单.自由.标题.停靠{
颜色：#FFF；
字体大小：粗体；
}
#停靠#菜单。自由。标题。取消停靠{
颜色：#FFFFFF；
}

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

活动




链接

报告


维护

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

问候

---

Henry

我建议让悬停在“A”元素而不是LI元素上工作

为了使LI元素可轻松单击，您需要将其中的“A”元素设置为显示：块（或内联块），因为默认情况下“A”标记为显示：内联

所以

ullia{
显示：块；
}
ul li a：悬停，ul li a：聚焦{
颜色：红色；
}

我发现，如果将“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;
}

---

你怎么知道列表项何时被“选中”？我希望这是HTML的一个片段，因为它是

，但在
中-所以你的
#菜单应该是
或者确保它在打开和关闭
的内部，我不是说被选中，但是悬停在
li上：悬停
总是对
li
被
悬停
ed做出反应。确保你的
li
在你认为它的位置，并且有你认为它的大小。不要在
标记周围放置
标记，这在HTML中是错误的。我在类似这样的#dock ul li a{dsiplay:block；}中添加了代码，没有这样的代码luck@Billy护城河-我想这取决于你希望调用的效果。你真的把它输入为“dsiplay”了吗？如果是这样，那应该是“显示”。是的，就是它@BillyMoat哈哈。。。我=彻底冲洗。。。谢谢大家的帮助！！！！传说！！现在，如果任何男性化者想为我写一个快速的活动，那将是伟大的哈哈
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;
}