我遇到了一个小问题。因为,我目前正在处理左侧菜单,并试图调用这两个标签 li
和 a
同时在:active
在 CSS 中。我搜索了很多但无法为我工作。我想要的是改变整行的颜色 li
和 a
在 :active
(当用户点击按钮时)。
这是我的代码:
.sub-menu li,
a:active {
color: #f1f1f1 !important;
background-color: #2e8fda !important;
}
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li data-toggle="collapse" class="collapsed">
<a><i class="<?=$MainObj['Icon'];?>" style="color:#9f9e9e !important"></i><?=$MainObj['GroupMenuName'];?> <span class="arrow" style="color:#9f9e9e !important">
</span></a>
<ul class="sub-menu collapse" id="a">
<li><a href="#">check1</a></li>
<li><a href="#">check2</a></li>
<li><a href="#">check3</a></li>
<li><a href="#">check4</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-user fa-lg" style="color:#9f9e9e !important"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg" style="color:#9f9e9e !important"></i> Users
</a>
</li>
</ul>
<span class="collapse-expand" data-ember-action="" data-ember-action-1815="1815"></span>
</div>
最佳答案
在包含的父列表项元素上声明您的 :active
伪状态 规则,然后只允许您的嵌套 anchor 标记继承
父级的样式。
.sub-menu li:active {
color: #f1f1f1 !important;
background-color: #2e8fda !important;
}
.sub-menu li a {
color: inherit;
}
.sub-menu li:active {
color: #f1f1f1 !important;
background-color: #2e8fda !important;
}
.sub-menu li a {
color: inherit;
}
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li data-toggle="collapse" class="collapsed">
<a><i class="<?=$MainObj['Icon'];?>" style="color:#9f9e9e !important"></i><?=$MainObj['GroupMenuName'];?> <span class="arrow" style="color:#9f9e9e !important">
</span></a>
<ul class="sub-menu collapse" id="a">
<li><a href="#">check1</a></li>
<li><a href="#">check2</a></li>
<li><a href="#">check3</a></li>
<li><a href="#">check4</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-user fa-lg" style="color:#9f9e9e !important"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg" style="color:#9f9e9e !important"></i> Users
</a>
</li>
</ul>
<span class="collapse-expand" data-ember-action="" data-ember-action-1815="1815"></span>
</div>
关于css - 如何在事件 : to make changes in css 上同时调用两个标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47300719/