Question

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

在一个充满javascript和css的html页面中，有一个<div>标记，其中包含以下样式：

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

指出，我可以判断元素何时被悬停，因为背景将是红色的，我可以告诉它何时被点击，因为背景将是黑色。

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

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

修改

以下是我正在处理的内容：http://faithserve.com/jOS/

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

Answer 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：链接和A：访问后规则，因为否则级联规则将隐藏'颜色' A：悬停规则的属性。同样，因为放置了A：active 在A：悬停之后，当用户同时使用活动颜色（石灰）激活并悬停在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;
}

Answer 2

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

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

DEMO

鼠标悬停时按钮不活动

2 个答案: