直到鼠标悬停按钮才激活答案

【问题标题】：Button Not Active Until Mouseout直到鼠标悬停按钮才激活
【发布时间】：2013-07-27 06:24:09
【问题描述】：

我想说这不是 CSS 问题。以下只是用css演示我遇到的那种问题。

在一个用javascript和css填充的html页面中，有一个<div>标签，其样式如下：

div {
  background-color:#fff;
}
div:hover {
  background-color:#f00;
}
div:active {
  background-color:#000;
}

重点是，我可以知道元素什么时候被悬停，因为背景是红色的，我可以知道它什么时候被点击，因为背景是黑色的。

发生的事情是悬停样式有效，但是当我单击元素时，它不会变为活动状态，直到仍然按住鼠标按钮，我将鼠标拉出元素。

这可能是我在页面上弄乱了事件处理程序的结果，但我只是想知道是否有其他人遇到过这种现象并知道它可能是什么。

编辑

这是我的工作：http://faithserve.com/jOS/

单击“应用程序”菜单，然后单击开始。那个按钮式的东西就是我遇到的问题。

【问题讨论】：

一些浏览器只支持 :active & :hover 在锚元素上。我建议在 .hover() 和 .active/.clicked .on('click'); 上添加 .hover；
这是谷歌浏览器。并且 :active 样式出现了，直到鼠标从 <div> 上方拉出
在这里工作，否则我不明白你的问题：jsfiddle.net/UDwRn
是的，事情是我正在与其他 css 和事件处理程序一起做很多工作，但我不确定我在哪里搞砸了。我只是想看看有没有人以前见过这个，因为它有点奇怪，并且可能知道我遇到了什么样的问题
@SamuelReid 不明白，和javascript有什么关系？

标签： javascript jquery html css events

【解决方案1】：

你的问题是css定义的顺序。状态具有需要定义的特定顺序。请参阅此答案的结尾部分：https://stackoverflow.com/a/7508202/476786

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */
注意 A:hover 必须放在 A:link 和 A:visited 之后规则，否则级联规则将隐藏“颜色” A:hover 规则的属性。同样，因为 A:active 被放置 A:hover 之后，当用户同时使用活动颜色（石灰）激活并悬停在 A 元素上。

在你的问题中，你有正确的方法，所以它不能被复制，而我这里有一个演示也显示了错误的方法：http://jsfiddle.net/pratik136/nbW6L/

/* Right */
div.right {
  background-color:#fff;
}
div.right:hover {
  background-color:#f00;
}
div.right:active {
  background-color:#000;
}

/* Wrong */
div.wrong {
  background-color:#fff;
}
div.wrong:active {
  background-color:#000;
}
div.wrong:hover {
  background-color:#f00;
}

【讨论】：

【解决方案2】：

您必须确保 CSS 规则 :hover 设置在 :active 之前。您可以使用它而不仅仅是 :active ：

div:hover:active {
  background-color:#000;
}

DEMO

【讨论】：