Question

以下是alistapart article的摘录。但“焦点”（点击）的过渡似乎不适用于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>

Answer 1

不确定为什么它不适用于Chrome，但可以尝试使用“onclick”事件而不是伪类。下面的内容应该会对Chrome和其他人产生同样的效果。

此外，建议使用'onclick'和类似事件而不是Pseudo类。

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>

Answer 2

请查看this page＆amp;特别是this page兼容性。 CSS 26.0，firefox 16和opera 12.10

中的CSS过渡是可以的

CSS3 Transition无法处理：在为两者定义转换时关注：focus和：hover

2 个答案: