我想知道是否有办法降低所有’li’的不透明度(悬停),除了我实际上正在徘徊的那个?类似于这张图片的东西:
.main-navigation { margin: 0; padding: 20px 0px 25px; list-style: none; background-color: #ffffff; text-align: center; display:block; font-size:1.1em; } .main-navigation li.hvr a.lvl1:link,.main-navigation li.hvr a.lvl1:visited { display: block; padding: 5px 2px 5px 3px; color: #000; text-decoration: none; text-align:center; } .main-navigation li.hvr a.lvl1.active { background: #eeeeee; color:#000000; } .main-navigation li.hvr a.lvl1:hover { background-color: #E6E6E6; color:#666666; } .main-navigation li.hvr { float: left; position: relative; width:191px; margin:0; font-family: 'Open Sans',sans-serif; } .main-navigation li.hvr:hover { background-color: #E6E6E6; } .main-navigation ul { display: none; position: absolute; top:100%; left: 0; z-index: 9999; background-color: #777; margin: 0; padding: 0; min-width:100%; text-align:left; } .main-navigation li.hvr:hover ul { display: block; } .main-navigation li.hvr ul li { margin: 0; padding: 0; list-style: none; } .main-navigation li.hvr ul li a:link,.main-navigation li.hvr ul li a:visited { display: block; padding: 5px 20px; color: #fff; text-align: center; } .main-navigation li.hvr ul li a:hover,.main-navigation li.hvr ul li a:active { display: block; padding: 5px 20px; color: #fff; background-color:#cccccc; }
<ul class="main-navigation clearfix"> <li class="hvr "> <a class="lvl1 active" href="">Title 1</a> <ul> <li><a href="">Sub title 1</a></li> <li><a href="">Sub title 2</a></li> <li><a href="">Sub title 3</a></li> </ul> </li> <li class="hvr "> <a class="lvl1" href="">Title 2</a> <ul> <li><a href="">Sub title 1</a></li> <li><a href="">Sub title 2</a></li> <li><a href="">Sub title 3</a></li> </ul> </li> <li class="hvr "> <a class="lvl1" href="">Title 3</a> <ul> <li><a href="">Sub title 1</a></li> <li><a href="">Sub title 2</a></li> <li><a href="">Sub title 3</a></li> </ul> </li> <li class="hvr "> <a class="lvl1" href="">Title 4</a> <ul> <li><a href="">Sub title 1</a></li> <li><a href="">Sub title 2</a></li> <li><a href="">Sub title 3</a></li> </ul> </li> </ul>
解决方法
使用CSS降低所有剩余物品的不透明度.
关键是要降低所有< li>的不透明度.父元素(ul)悬停时的元素,并将悬停的li元素上的不透明度重置为1,如下所示:
ul:hover li { opacity:0.5; } ul li:hover { opacity:1; }
这是一个简单的演示:
li{ float:left; width:33.33%; line-height:50px; background:grey; list-style-type:none; } ul:hover li{ opacity:0.5; } ul li:hover{ opacity:1; }
<ul> <li>item</li> <li>item</li> <li>item</li> </ul>
原文地址:https://www.jb51.cc/css/215482.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。