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

<强> Fiddle

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

添加第二个名为clicked的班级。在删除类之前，让悬停事件检查此类。

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

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

<强> Fiddle

Answer 2

纯CSS解决方案： - DEMO

<强> HTML：

<div id="div-p">
    <label for="toggle-1"></label>
    <input type="checkbox" id="toggle-1">
    <div id="div"></div>
</div>

<强> CSS：

#div-p {
    position: relative;
}
label {
    position: absolute;
    width: 150px;
    height: 150px;
    background: transparent;
}
input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
input[type=checkbox]:checked ~ div#div {
    background-color: red !important;
}
#div {
    width: 150px;
    height: 150px;
    background-color: blue;
    display: inline-block;
}
label:hover {
    background-color: red;
}

Answer 3

DEMO

如果你必须使用 JS ONLY .......

如果您使用在toggleOn事件发生时翻转的变量click，则应解决您的问题。您不必在点击时切换toClass，因为您总是在悬停时点击：

var toggleOn = false;
$("div").hover(
    function() {
        $(this).addClass('active');
    }, function() {
        toggleOn || $( this ).removeClass('active');
    }
);
$( "div" ).click(function(){
        toggleOn = true;
});

Answer 4

让我们说hover已添加div和active类。现在点击，理想情况下应删除active类。

为此，请click与hover（为mouseenter和mouseout ）绑定，如下所示：

 $("div").bind('click mouseenter', function () {
     if ($(this).hasClass("active")) $(this).removeClass("active");
     else $(this).addClass("active");
 });


 $('div').mouseout(function () {
     if ($(this).hasClass("active")) $(this).removeClass("active");
 });

Fiddle Demo

Answer 5

试试这个：使用一个状态变量悬停或关闭，当用户点击图像和toggleClass时，使用此变量来了解悬停状态。

var clicked = false;
var activeByClicked = false;
$("div").hover(
    function() {
        if(!activeByClicked)
        $(this).addClass('active');
    }, function() {
         if(!activeByClicked)
         {
             clicked = false;
        $( this ).removeClass('active');
         }
    }
);
$( "div" ).click(function(){
     if(clicked)
     {
        if(!$(this).hasClass('active'))
        {
            activeByClicked = true;
        }
        else
        {
            //clicked = false;
            activeByClicked = false;
        }
        $(this).toggleClass('active');
     }
    else
    {
        clicked = true;
        activeByClicked = true;
    }

});

<强> Demo

Answer 6

首先，它可以在JavaScript中完成，其中：hover添加到所选规则，但如果你想在点击时删除颜色，最好的选择是使用第二个类。

<强> CSS：

div{
    width: 150px;
    height: 150px;
    background-color: blue;
    display: inline-block;
}
div.active, div.hoverActive{
    background-color: red;
}

<强> JavaScript的：

$("div").hover(
    function() {
        $(this).addClass('hoverActive');
    }, function() {
        $( this ).removeClass('hoverActive');
    }
);
$( "div" ).click(function(){
    var div = $(this);   
    div.toggleClass('active');
    if (!div.is(".active")) {
        div.removeClass("hoverActive");
    }    
});

的jsfiddle：

http://jsfiddle.net/f1p0ahmk/1/

Answer 7

更改您的点击代码，因为切换将被悬停功能抵消：

$( "div" ).click(function(){
    if($(this).hasClass("active")) $(this).removeClass("active");
    else $(this).addClass("active");
});

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

7 个答案:

纯CSS解决方案： - DEMO