Как применить вложенный css с помощью jQuery?

У меня есть stylesheet.css файл, который содержит следующее:Как применить вложенный css с помощью jQuery?

.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; 
}

Как применить это парение CSS по щелчку <a href...> элемента и парить эффект должен оставаться после того, как событие щелчка?

источник

2015-06-16 Mayur Patel

возможно дубликат [Изображение парения Jquery эффект] (http://stackoverflow.com/questions/25204216/image-hover-jquery- эффект) –

Чистым вариантом CSS может быть использование псевдокласса ': focus', но с использованием JavaScript вы должны добавлять/удалять классы, содержащие соответствующие стили. –

Я покажу вам, что вы можете достичь этого для первого тега 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 для переключения класса на событие щелчка.

$('.vertical-navigation .navbar-default .navbar-nav > li > a').click(function() { 
    $(this).toggleClass('selected');  
});

Надеюсь, что это поможет.

источник

2015-06-16 04:09:15 karanmhatre

Я хочу, чтобы этот эффект зависания оставался после щелчка, что означает, что если я нажму, то он должен остаться, поскольку он зависает. –

Именно это и происходит в этом случае. – karanmhatre

Могу ли я воспроизвести все три стиля css –

Я думаю, что это ваше решение (сенсорные устройства должны работать тоже)

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

источник

2015-07-06 11:29:06

Как применить вложенный css с помощью jQuery?

ответ

Смежные вопросы