CODEWITHSUNDEEP
htmlcss
Dbob
Dbob

Reputation: 67

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

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>

Upvotes: 0

Views: 1470

Answers (2)

sojin
sojin

Reputation: 4694

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>

Upvotes: 1

clement
clement

Reputation: 4266

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

Upvotes: 0

Related Questions