Добавить класс к .hover функциональности по определенному имени класса - jQuery

Question

Итак, во всем моем документе я бы хотел, чтобы каждый раз, когда пользователь наводил курсор на элемент с определенным именем класса, я хотел бы добавить класс.

Мой CSS выглядит так:

.hotspot:hover, .hotspothover
    {
    border: 4px solid #fff;
    box-shadow: 0px 0px 20px #000;
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    z-index: 1;
    }

Имя класса: "горячая точка".

Я попробовал это, но, похоже, это не работает:

    $("#hotspot.hover #hotspothover").addClass("bubble bottom");

Спасибо.

Answer 1

Вы были близки!

добавить запятую:

$(".hotspot:hover, .hotspothover").addClass("bubble bottom");

Answer 2

Может быть, я неправильно понял, но я думал, что вы хотели, чтобы это было добавлено при наведении курсора. Это показывает, что:

$('.hotspot, .hotspothover').hover(function(){
    $(this).addClass('bubble bottom');
});

Если вы хотите, чтобы они также были удалены при зависании, измените addClass на toggleClass.

ОБНОВЛЕНИЕ: Следователь задал вопрос и спросил:

Теперь, что произойдет, если я хочу, чтобы они заменить «горячую точку» или «горячую точку»? Как и для всех элементов на странице с класс точка доступа или класс «горячая точка» заменить его на «пузырь» Дно '

Я бы изменил это так:

$('.hotspot').hover(function(){
    $(this).addClass('bubble bottom').removeClass('hotspot');
});
$('.hotspothover').hover(function(){
    $(this).addClass('bubble bottom').removeClass('hotspothover');
});

Теперь, вы тоже можете это сделать, но если вы хотите быть более точным в отношении действий, выполнение этого в виде двух наборов вызовов имеет больше смысла.

$('.hotspothover, .hotspot').hover(function(){
    $(this).addClass('bubble bottom').removeClass('hotspothover hotspot');
});

Answer 3

Что-то вроде

$('.targetClass').hover(function() { $(this).toggleClass('hovered'); });

должно работать, если вы используете jQuery 1.4.2

Answer 4

Вот как это сделать.

$ (". Hotspot: hover, .hotspothover"). AddClass ("нижняя граница");