如果子链接或孙链接使用CSS处于活动状态，则将父链接设置为活动
如果子链接或孙链接使用CSS处于活动状态，则将父链接设置为活动
提问于 2015-06-28 19:52:46
我有一个HTML/CSS菜单，其中包含活动链接的CSS：
.navigation ul li a:hover, .navigation .active-nav {
background-color: #F36F25; /*#373737;*/
text-shadow: none;
color: #f7f7f7 !important;
-webkit-box-shadow: 0 3px 0 #ff8833;
box-shadow: 0 3px 0 #ff8833;
}小提琴：http://jsfiddle.net/kyvbzssd/
如果顶层父链接或其子链接的任何子链接都有活动类，如何将其设置为活动的？
回答 3
Stack Overflow用户
发布于 2015-07-21 04:18:12
也将样式添加到您的li元素：http://jsfiddle.net/kyvbzssd/3/
.navigation ul li{
padding: 80px 9px 10px;
}
.navigation ul li a,.navigation ul li{
font-size: 13px;
font-weight: 700;
color: #4d4d4d;
text-decoration: none;
display: inline-block;
margin-bottom: 0;
text-transform: uppercase;
border-bottom: 2px solid #fff;
-webkit-transition: background-color .2s linear, padding-top .2s linear;
-moz-transition: background-color .2s linear, padding-top .2s linear;
-o-transition: background-color .2s linear, padding-top .2s linear;
-ms-transition: background-color .2s linear, padding-top .2s linear;
transition: background-color .2s linear, padding-top .2s linear;
}
.navigation ul li a:hover,.navigation ul li:hover,.navigation .active-nav {
background-color: #F36F25; /*#373737;*/
text-shadow: none;
color: #f7f7f7!important;
-webkit-box-shadow: 0 3px 0 #ff8833;
box-shadow: 0 3px 0 #ff8833;
}Stack Overflow用户
发布于 2015-06-28 19:59:54
这并不是只通过css就可以实现的。你应该使用一些javascript代码。
$('.child').on('click', function(){
$(this).closest('.parent').toggleClass('active');
});Stack Overflow用户
发布于 2015-07-27 15:59:58
到目前为止(2015年)，还没有办法只使用CSS来做到这一点。但是，您可以使用Jquery完成此操作。$("a.active").parents('li').css("property", "value");
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31099465
复制相关文章
相似问题