html – 如果孩子或孙子链接使用CSS活动,则设置父链接处于活动状

发布时间：2020-12-14 22:27:07 所属栏目：资源来源：网络整理

导读：我有一个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

我有一个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/

如果任何一个孩子或其孩子的子链接有一个活动的类，我如何将顶级父链接设置为活动的？

解决方法

将样式添加到您的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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!