javascript 如何在悬停和单击时添加活动类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25848411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add active class on hover and on click?
提问by Benjamin
I'm developing an application where I need to add class activefor both hoverand clickevents.
The challenge I am facing here is when I hover my content, it adds the class active. There is no problem in that.
Since it is active now, when I am about to click on content it should hold up with the class active. But instead it goes to the normal state and it toggles the class.
我正在开发一个应用程序，我需要active为hover和click事件添加类。
我在这里面临的挑战是，当我将内容悬停时，它会添加 class active。这没有问题。
由于它现在处于活动状态，当我要单击内容时，它应该与 class 保持一致active。但是它会进入正常状态并切换类。
JQuery
查询
$("div").hover(
function() {
$(this).addClass('active');
}, function() {
$( this ).removeClass('active');
}
);
$( "div" ).click(function(){
$(this).toggleClass('active');
});
回答by timo
Use CSS for the hover event
将 CSS 用于悬停事件
div:hover{background:red;}
And remove the hover event from your Javascript:
并从您的 Javascript 中删除悬停事件：
$( "div" ).click(function(){
$(this).toggleClass('active');
});
If you want the same functionality without CSS.
如果您想要没有 CSS 的相同功能。
Add a second class called clicked. Let the hover event check for this class before removing the class.
添加名为 的第二个类clicked。在移除类之前让悬停事件检查这个类。
$("div").hover(
function() {
$(this).addClass('active');
}, function() {
if(!$( this).hasClass('clicked') ){
$( this ).removeClass('active');
}
}
);
$("div").click(function(){
$(this).toggleClass('clicked');
});
回答by Anonymous
Pure CSS Solution: - DEMO
纯 CSS 解决方案： -演示
HTML:
HTML：
<div id="div-p">
<label for="toggle-1"></label>
<input type="checkbox" id="toggle-1">
<div id="div"></div>
</div>
CSS:
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;
}
回答by PeterKA
If you must use JS ONLY.......
如果您必须仅使用JS......
If you use a variable toggleOnthat flips on when clickevent happens, your issue should be solved. You do not need to toggleClass on click since you'll always click while hovered:
如果您使用toggleOn在click事件发生时翻转的变量，您的问题应该得到解决。你不需要在点击时切换类，因为你总是在悬停时点击：
var toggleOn = false;
$("div").hover(
function() {
$(this).addClass('active');
}, function() {
toggleOn || $( this ).removeClass('active');
}
);
$( "div" ).click(function(){
toggleOn = true;
});
回答by epascarello
Firstly it could all be done in JavaScript with a :hover added to the selected rule, BUT if you want the color to be removed on click, the best option would be to use a second class.
首先，这一切都可以在 JavaScript 中完成，并将 :hover 添加到所选规则中，但是如果您希望在单击时删除颜色，最好的选择是使用第二个类。
CSS:
CSS：
div{
width: 150px;
height: 150px;
background-color: blue;
display: inline-block;
}
div.active, div.hoverActive{
background-color: red;
}
JavaScript:
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:
JSFiddle：
回答by NoobEditor
Lets say you hoverthe divand activeclass is added.Now you click, so ideally activeclass should be removed.
假设您添加hover了divandactive类。现在您单击，因此理想情况下active应该删除类。
For this, Bind clickwith hover(as mouseenterand mouseout) as below :
对于这一点，绑定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");
});
回答by Bhushan Kawadkar
Try this : use one status variable for hover on or off, use this variable to know the hover status when user clicks on image and toggleClass accordingly.
试试这个：使用一个状态变量来打开或关闭悬停，使用这个变量来了解用户点击图像时的悬停状态并相应地切换类。
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;
}
});
回答by Control Freak
Change your click code, since the toggle will be offset by the hover function:
更改您的点击代码，因为切换将被悬停功能抵消：
$( "div" ).click(function(){
if($(this).hasClass("active")) $(this).removeClass("active");
else $(this).addClass("active");
});
