我有一些菜单栏,目前,当将鼠标悬停在
上时,背景变为黑色 <li>content</li>
当文本悬停时,文本会从黑色变为白色。
我需要这样做,以便在整个<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>
,这是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>
如果您能够提供帮助,请提前致谢
此致
亨利
答案 0 :(得分:24)
我建议将悬停工作放在'A'元素而不是LI元素上。
为了使LI元素易于点击,您需要在其中设置'A'元素以显示:block(或inline-block),因为'A'标签显示:默认为内联。
... 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;
}
答案 1 :(得分:7)
我发现如果你使用填充代替“li”代替“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;
}