Change transition time on onmouseover and onmouseout?

Question

This is my HTML

<img class="logo" src="css/images/logo.png" align="center"    onmouseover="this.src='css/images/logohov.png'" onmouseout="this.src='css/images/logo.png'"> </img>

Is there a way I can change the transition time? I've added transition:all 0.3s ease; to the class logo but it doesnt do anything.

Thanks

Answer 1

You are changing src attribute which can not be used with transition property, even though you used content property of css then also it can not be used with transition, instead try two img tags, and hide one and show another with transition on hover.

Here are some examples

Answer 2

Transition property works only when you change a CSS property , in your example you changing an HTML attribute .

Try something like this:

<div class="logo" align="center" onmouseover="this.style.backgroundImage=\"url('css/images/logohov.png')\"" onmouseout="this.style.backgroundImage=\"url('css/images/logo.png')\""> </div>

Answer 3

I had luck just adding

-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;

to my css for a class on a tag and it effected the transition time for the onmouseover and onmouseout (not using any :hover css).

PS in order for the onmouseover and onmouseout to effect the text inside the tag I had to put the tag for my link around the entire button, instead of inside.

Hope that helps!