Hover, Hover-out, Cicked

Question

$('#box_1, #box_2, #box_3, #box_4').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});

Но когда я нажал, "HOVER" class = .removeClass('hover')

В любом случае, чтобы остаться в этом классе "HOVER", когда я нажал?

http://jsfiddle.net/EAa6p/ (Это мой оригинал)

---

СДЕЛАНО! Бен http://jsfiddle.net/EAa6p/1/ Спасибо вам всем

Answer 1

Я думаю, что вы хотите сохранить класс при наведении курсора при нажатии.

Наилучшим вариантом является использование data () для сохранения состояния и проверки при наведении

var boxes = $('#box_1, #box_2, #box_3, #box_4');
boxes.hover(function() {
    $(this).addClass('hover');
}, function() {
    if (!$(this).data('clicked'))
        $(this).removeClass('hover');
}).click(function(){

    boxes.not(this).removeClass('hover').data('clicked',false);;
    $(this).data('clicked',true);

});

Это то, что вы хотели?

http://jsfiddle.net/uhc9S/

Answer 2

Сохранить одну переменную, которая содержит идентификатор элемента меню, щелкнув

var currentSelected = null;

$('#box_1, #box_2, #box_3, #box_4').click(function(){
     currentSelected = this.id;   
});

$('#box_1, #box_2, #box_3, #box_4').hover(function(){
    if (this.id !== currentSelected){
        $(this).addClass("hover");
    }
},
function(){
    if (this.id !== currentSelected){
        $(this).removeClass("hover");
    }
});

Answer 3

http://jsfiddle.net/hRnQE/

при нажатии переключает другой «другой» класс, который делает то же самое ...

JS

$("#box-1, #box-2, #box-3").hover(function() {
    $(this).addClass("hover");
}, function() {
    $(this).removeClass("hover");
});

$("#box-1, #box-2, #box-3").click(function() {
    $(this).toggleClass("hover-clicked");
});

1010 * CSS *

.hover {color:red;}
.hover-clicked {color:red;}

Answer 4

CSS: измените правило .hover{...} на

#box_1:hover, #box_1.hover,
#box_2:hover, #box_2.hover,
#box_3:hover, #box_3.hover,
#box_4:hover, #box_4.hover {
    ...
}

JavaScript / jQuery: не добавляйте класс наведения при наведении и удаляйте его при наведении.Вместо этого CSS будет обрабатывать hover, а jQuery просто должен обрабатывать щелчок:

$('#box_1, #box_2, #box_3, #box_4').click(function() {
    $(this).addClass('hover');
});

Правило :hover означает, что оно находится в режиме мыши.Правило .hover будет использоваться, когда вы хотите, чтобы оно выглядело зависшим после нажатия.

Answer 5

Использовать указатель мыши и указатель мыши

$('#box_1, #box_2, #box_3, #box_4').mouseover(function(){
   $(this).addClass('hover');
}).mouseout(function(){
   $(this).removeClass('hover');
});