html – 将鼠标悬停在>项目更改文本颜色上…… CSS技巧?
发布时间:2020-12-14 21:13:02 所属栏目:资源 来源:网络整理
导读:我有一些菜单栏,目前,当悬停在一个时,背景变为黑色 licontent/li 当它悬停在上面时,文本从黑色变为白色. 我需要制作它,以便在整个 li内容 / li时改变文字颜色.徘徊,而不仅仅是文本突出显示. 这是css style type="text/css" body{margin:0px; font-family:Tah
我有一些菜单栏,目前,当悬停在一个时,背景变为黑色
<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; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |