如何使用jQuery應用嵌套的CSS？

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)