[英]How to apply nested css using jQuery?
I have stylesheet.css file which contain the following: 我有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;
}
How to apply this hover css on click of the <a href...>
element and hover effect should remain after the click event ? 如何在单击
<a href...>
元素时应用此悬停CSS,并且单击事件后应保持悬停效果?
I'll show you have you can achieve this for the first a
tag. 我会告诉你,你可以做到这一点的第
a
标签。 You can replicate the same for the remaining. 您可以为其余部分复制相同的内容。
Change the CSS to assign those properties to another class as well, eg. 更改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);
}
Then add the following jQuery code to toggle the class on click event. 然后添加以下jQuery代码以在click事件上切换类。
$('.vertical-navigation .navbar-default .navbar-nav > li > a').click(function() {
$(this).toggleClass('selected');
});
Hope this helps. 希望这可以帮助。
I think that's your solution (touch devices should work too) 我认为这就是您的解决方案(触摸设备也应该工作)
.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.