изменение цвета фона внешнего div при наведении курсора мыши (кнопки) с помощью jquery

0

Я разработал всплывающее окно стиля, в котором есть заголовок и раздел содержимого. Внутри раздела контента я тоже добавил кнопку. Я пытаюсь изменить цвет фона в строке заголовка. Я создал два класса (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. Поэтому, пожалуйста, предложите некоторые способы достижения этой функциональности.
Спасибо огромное!

  • 0
    нет события с именем hover, вам нужно использовать метод hover или mouseenter и mouseleave
  • 1
    см. jsfiddle.net/arunpjohny/9cLtX/1
Показать ещё 1 комментарий

3 ответа

4
Лучший ответ

Тебе нужно:

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");
});

Обновленный скрипт

1

вы можете сделать так:

$('#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");
        });

Пример FIDDLE

  • 1
    Это можно упростить до: $('#start').hover(function() { $('.title_bar').toggleClass('title_bar_hover'); });
  • 0
    да, но при наведении нельзя использовать ..
Показать ещё 2 комментария
1

С этим вы можете легко переключаться на класс при наведении.

$('.title_bar').hover(function(){
         $('.title_bar').toggleClass('title_bar_hover');
    }, function(){
         $('.title_bar').toggleClass('title_bar_hover');
    });

Надеюсь, он вам полезен :)

Демо-версия JSBIN

Сообщество Overcoder
Наверх
Меню