将鼠标悬停在< li>项< / li>更改文本颜色太... CSS技巧？ [英] make hover on <li>item</li> change text colour too... CSS trick?
本文介绍了将鼠标悬停在< li>项< / li>更改文本颜色太... CSS技巧？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一些菜单栏，此时，将鼠标悬停在上时，背景变为黑色。
< li> ; content< / li>
，当文字悬停时，文字从黑色变为白色。
我需要使文本颜色变化，当整个< li>内容< / li>
code>< style type =text / css>
body {margin：0px; font-family：Tahoma，Sans-Serif; font-size：13px;}
/ * dock * /
#dock {margin：0px; padding：0px; list-style：none;位置：固定; top：0px;高度：100％;
z-index：100;背景颜色：; left：0px;}
#dock> li {width：40px; height：120px; margin：0 0 1px 0;背景颜色：＃;
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 {
颜色：＃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 =＃>链接数据< / a>< / li>
< li>< a href =＃>搜索< / a>< / li&
< li>< a href =＃>摘要表< / a>< / li>
< li>< a href =＃>添加新客户< / a>< / li>
< li class =header> LINKS< / li>
< li>< a href =＃>记录交易< / a>< / li>
< li class =header> REPORTS< / li>
< li>< a href =＃>移交表< / a>< / li>
< li>< a href =＃>移交摘要< / a>< / li>
< li class =header> MAINTENANCE< / li>
< li>< a href =＃>退出< / a>< / li>
< li>< a href =＃>管理用户< / a>< / li&
< / ul>
< / li>
提前感谢您能够提供帮助
谨慎
亨利
解决方案
a]元素而不是LI元素。
为了使LI元素具有可点击性，您需要在其中设置A元素显示：block（或inline-block）as'A'tags are display：inline in default。
SO ...
< ul>
< li>< a href =＃>我的链接< / a>< / li>
< / ul>
ul li a {
display：block;
}
ul li a：hover，ul li a：focus {
color：red;
}
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.
here is the 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
<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
解决方案
I'd recommend making the hover work on the 'A' elements instead of the LI elements.
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.
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;
}
这篇关于将鼠标悬停在< li>项< / li>更改文本颜色太... CSS技巧？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
