Я разработал всплывающее окно стиля, в котором есть заголовок и раздел содержимого. Внутри раздела контента я тоже добавил кнопку. Я пытаюсь изменить цвет фона в строке заголовка. Я создал два класса (title_bar
& title_bar_hover
), которые содержат background: linear-gradient();
собственность только. В соответствии с решением, данным в этом потоке stackoverflow, я написал следующий jquery. Я также добавил плагин jquery-ui
.
$('#start').on('hover',function(){
var target = $('.title_bar');
target.addClass(".title_bar_hover");
},5);
Но этот код не может ничего выполнить. Однако здесь приведен пример jsfiddle. Поэтому, пожалуйста, предложите некоторые способы достижения этой функциональности.
Спасибо огромное!
Тебе нужно:
1) Включите jQuery в вашу jsFiddle
версию jsFiddle
2) Используйте .hover() вместо .on('hover',...
3) Используйте .toggleClass() вместо .addClass()
4) Исправьте имя класса как title_bar_hover
в вашем CSS
$('#start').hover(function () {
var target = $('.title_bar');
target.toggleClass("title_bar_hover");
});
вы можете сделать так:
$('#start').on('mouseover',function(){
var target = $('.title_bar');
target.toggleClass("title_bar_hover");
});
$('#start').on('mouseout',function(){
var target = $('.title_bar');
target.toggleClass("title_bar_hover");
});
$('#start').hover(function() {
$('.title_bar').toggleClass('title_bar_hover');
});
С этим вы можете легко переключаться на класс при наведении.
$('.title_bar').hover(function(){
$('.title_bar').toggleClass('title_bar_hover');
}, function(){
$('.title_bar').toggleClass('title_bar_hover');
});
Надеюсь, он вам полезен :)