[英]How to apply nested css using jQuery?
我有stylesheet.css文件,其中包含以下内容:
.vertical-navigation .navbar-default .navbar-nav > li > a:hover {
background-image: url(../images/sticcky_nav_hover.png)
}
.vertical-navigation .navbar-default .navbar-nav > li > a.navfirst:hover {
background-position: 28px -2px;
}
.vertical-navigation .navbar-default .navbar-nav > li > a.navsecond:hover {
background-position: 24px -82px;
}
如何在单击<a href...>
元素时应用此悬停CSS,并且单击事件后应保持悬停效果?
我会告诉你,你可以做到这一点的第a
标签。 您可以为其余部分复制相同的内容。
更改CSS以将这些属性也分配给另一个类,例如。 selected
.vertical-navigation .navbar-default .navbar-nav > li > a:hover,
.vertical-navigation .navbar-default .navbar-nav > li > a.selected {
background-image: url(../images/sticcky_nav_hover.png);
}
然后添加以下jQuery代码以在click事件上切换类。
$('.vertical-navigation .navbar-default .navbar-nav > li > a').click(function() {
$(this).toggleClass('selected');
});
希望这可以帮助。
我认为这就是您的解决方案(触摸设备也应该工作)
.vertical-navigation .navbar-default .navbar-nav > li > a:hover,
.vertical-navigation .navbar-default .navbar-nav > li > a:active {background-image: url(../images/sticcky_nav_hover.png)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.