如何在悬停和点击时添加活动类？

Question

我正在开发一个应用程序,我需要active为这两个事件hover和click事件添加类.
我在这里面临的挑战是当我将我的内容悬停时,它会添加课程active.这没有问题.
由于它现在处于活动状态,当我即将点击内容时,它应该支持该类active.但相反,它进入正常状态,并切换类.

JQuery的

$("div").hover(
    function() {
        $(this).addClass('active');
    }, function() {
        $( this ).removeClass('active');
    }
);
$( "div" ).click(function(){
        $(this).toggleClass('active');
});

DEMO

Answer 1

将CSS用于悬停事件

div:hover{background:red;}

并从您的Javascript中删除悬停事件:

$( "div" ).click(function(){
    $(this).toggleClass('active');
});

小提琴

如果你想要没有CSS的相同功能.

添加第二个名为的类clicked.在删除类之前,让悬停事件检查此类.

$("div").hover(
    function() {
        $(this).addClass('active');
    }, function() {
        if(!$( this).hasClass('clicked') ){
            $( this ).removeClass('active');
        }
    }
);

$("div").click(function(){
    $(this).toggleClass('clicked');
});

小提琴