-1

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

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

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

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

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

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

编辑

这是我正在做的事情：http: //faithserve.com/jOS/

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

4

2 回答 2

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 规则的 'color' 属性。同样，因为 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;
}
于 2013-07-26T20:45:58.073 回答
0

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

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

演示

于 2013-07-26T20:41:52.307 回答