0

下面给出的是alistapart 文章的片段。但是“焦点”（点击）的转换似乎不适用于 Chrome（25.0.1364.172）和 Firefox（19.0.2）。但适用于 Opera(12.14)（在 Linux 上）。

知道为什么吗？

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
a.foo:hover,
a.foo:focus {
  background: #690;
}
</style>
</head>
<body>
<a href="#" class="foo">Transition me!
</body>
</html>
4

2 回答 2

1

不知道为什么它不能在 Chrome 上运行，但可以尝试使用“onclick”事件而不是伪类。像下面这样的东西应该会给你在 Chrome 和其他人上同样的效果。

此外，建议使用“onclick”和类似事件而不是伪类。

http://jsfiddle.net/RFauS/

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

a.foo_clicked {
  padding: 5px 10px;
  background: #690;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

a.foo:hover
{  background: #690;
}
</style>
</head>
<body>
<a href="#" class="foo" onclick="this.className='foo_clicked';" tabindex="0" onBlur="this.className='foo';" >Transition me!</a>
</body>
</html>
于 2013-03-16T10:26:44.157 回答
0

请检查此页面，尤其是此页面的兼容性。从 chrome 26.0、firefox 16 和 opera 12.10 过渡到 CSS 是可以的

于 2013-03-14T15:03:57.353 回答