html – 将鼠标悬停在>项目更改文本颜色上…… CSS技巧？

我有一些菜单栏,目前,当悬停在一个时,背景变为黑色

<li>content</li>

当它悬停在上面时,文本从黑色变为白色.

我需要制作它,以便在整个< li>内容< / 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>

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

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

问候

亨利

解决方法

我建议将悬停工作放在’A’元素而不是LI元素上.

为了使LI元素易于点击,您需要在其中设置’A’元素以显示：block(或inline-block),因为’A’标签显示：默认为内联.

所以…

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

ul li a {
 display:block;
}

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

html – 将鼠标悬停在>项目更改文本颜色上…… CSS技巧？

解决方法

猜你在找的HTML相关文章