CSS3 Transition not working on :focus when transition defined for both :focus and :hover

Question

Given below is a snippet from an alistapart article. But the transition on "focus" (click) doesn't seems to be working on Chrome(25.0.1364.172) and Firefox(19.0.2). But works with Opera(12.14) (On Linux).

Any idea why?

<!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>

Thanks! closing the did the trick for Firefox. But Chrome is still dodging :( — Dbob, Mar 14 '13 at 15:09
Read this: http://stackoverflow.com/questions/1677990/what-is-the-difference-between-focus-and-active. From your question, it sounds like you are confusing your pseudo-classes. Does adding `:active` to your CSS do what you are after? — CherryFlavourPez, Mar 14 '13 at 15:20
@Ed-M is right. You need to use :active if you are trying to capture the click. Secondly, if the background has already transitioned on hover, then you won't notice another transition to the exact same property on click (:active). — Adam Jenkins, Mar 14 '13 at 15:29
Thanks Adam, but as I mentioned about it didn't help. If you don't mind could you please try http://jsfiddle.net/EYtMY/ on Chrome? (It works on Firefox and Opera though). I expect the changed color sustained even after I moved the mouse away. — Dbob, Mar 14 '13 at 15:36
[This fork](http://jsfiddle.net/cherryflavourpez/jYR6C/) and your example above work perfectly for me in Chrome. You are describing the `active` state ("the changed color sustained even after I moved the mouse away"). — CherryFlavourPez, Mar 14 '13 at 15:43
Nope, its not working for me on Chrome(25.0.1364.172) on Linux. It might be broken between versions. — Dbob, Mar 14 '13 at 15:48

score 1 · Accepted Answer · answered Mar 16 '13 at 10:26

Not sure why it's not working on Chrome, but can try with "onclick" event instead of pseudo class. Something like below should give you same effect on Chrome and others.

Also it's recommended to use 'onclick' and similar events instead of Pseudo classes.

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>

clement · Answer 2 · 2013-03-14T15:24:36.417

0

Please check on this page & especially this page the compatibility. Transition in CSS is ok from chrome 26.0, firefox 16 and opera 12.10

edited Mar 14 '13 at 15:24

answered Mar 14 '13 at 15:03

clement

4,204
10
65
133

But transition on :hover works with Chrome 25. Shouldn't that be working on 25 as well ? Or may be multiple trigger might not work. – Dbob Mar 14 '13 at 15:14
This is irrelevant. He's using `-webkit-transition` which has been supported in Chrome since 1.0, `-mox-...` which has been supported in Firefox since 4.0 and `-o-...` which has been supported in Opera since 10.5. – James Donnelly Mar 14 '13 at 15:14

CSS3 Transition not working on :focus when transition defined for both :focus and :hover

2 Answers2