Question

我有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，并且点击事件后应保留悬停效果？

Answer 1

我会告诉您，您可以为第一个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');    
});

希望这有帮助。

Answer 2

我认为这是您的解决方案（触摸设备也应该有效）

      .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)

如何使用jQuery应用嵌套的css？

2 个答案: