javascript 如何在单击时为 div 提供悬停和活动状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23298198/
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 give a div a hover and active state on click
提问by Juntra
i've got a div which is black, when I hover over it, it turns green. when clicked, I want it to stay green also.
我有一个黑色的 div，当我将鼠标悬停在它上面时，它会变成绿色。单击时，我也希望它保持绿色。
normale state: black
正常状态：黑色
hover state: green
悬停状态：绿色
active state: green
活动状态：绿色
and when its active (green), I want to hover over it which makes the div black again.
当它处于活动状态时(green)，我想将鼠标悬停在它上面，这使 div 再次变黑。
i can't seem to get this active state work and in reverse.
我似乎无法让这个活动状态工作和相反。
thanks in advance!
提前致谢！
Here is my fiddle: Link
这是我的小提琴：链接
回答by Yuriy Galanter
You can do it without jQuery in pure CSS. Give your DIV a tabIndex so it can receive focus:
你可以在纯 CSS 中不用 jQuery 来完成。给你的 DIV 一个 tabIndex 以便它可以接收焦点：
<div id="profile" tabindex="0"></div>
And add :focusclass selection:
并添加:focus类选择：
#profile:hover, #profile:focus{
background: green;
}
Demo: http://jsfiddle.net/AfR49/10/
演示：http: //jsfiddle.net/AfR49/10/
This way the color "stick" after the click. (If I understood your requirement correctly). If you click elsewhere - color returns to the original
这样点击后颜色就会“粘住”。（如果我正确理解了您的要求）。如果你点击别处 - 颜色会恢复到原来的
回答by James Donnelly
Simply add styling for the :hoverstate on the .activeclass (note that I'm using tomatoinstead of blackas that's the colour you've used in your demo):
仅仅为了添加样式:hover状态的.active类（请注意，我用tomato的，而不是black因为这是你在你的演示中使用的颜色）：
#profile.active:hover {
background: tomato;
}
I'm not sure what you're wanting to achieve here though:
我不确定你想在这里实现什么：
$('#profile').removeClass('active');
$(this).addClass('active');
If you're wanting the element to toggle on and off of .activewith each click, you can simply:
如果您希望元素在.active每次点击时打开和关闭，您可以简单地：
$(this).toggleClass('active');
回答by Nicolas Carteron
Create a class .activecontaining the styling you want and add it to the div with jQuery.
创建一个.active包含所需样式的类，并使用 jQuery 将其添加到 div。
The you can easily style your div in the two states.
您可以轻松地在两种状态下设置 div 的样式。
.normal {background-color:black}
.normal:hover {background-color: green}
.active {background-color: green}
.active:hover {background-color: black}
回答by Satwik Nadkarny
Lets say you have the following div
假设您有以下 div
<div id="divSample"></div>
Then, you will need the following CSS:
然后，您将需要以下 CSS：
#divSample {
background-color:Black;
height:300px;
width:500px;
}
#divSample:hover {
background-color:Green;
}
#divSample:active {
background-color:Green;
}
You can see this here: http://jsfiddle.net/h4aVW/
你可以在这里看到这个：http: //jsfiddle.net/h4aVW/
Hope this helps!!!
希望这可以帮助！！！
