hover transition not working on first click after loading, but works after this?

Question

On my website page, hover transition effect on loudspeaker and mic gets lost on first click after loading, but works after severial tries. And this happens only for the mic and first loudspeaker picture. The rest of pictures work normal. Why is this?

My website link page

.chatmic
{
    width: 70px;    
    height: 50px;    
    margin-top: 5px;    
    margin-left: 10px;    
    background-image: url(../img/mic_on.png);    
    float: left;    
    opacity: 1;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
}
.chatmicoff
{
    background-image: url(../img/mic_off.png);
    opacity: 0.3;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
}

.chatloudspeaker
{
    width: 70px;    
    height: 50px;    
    margin-top: 5px;    
    margin-left: 10px;    
    background-image: url(../img/loudspeaker_on.png);    
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    float: left;    
    opacity: 1;
}
.chatloudspeakeroff
{
    background-image: url(../img/loudspeaker_off.png);
    opacity: 0.3;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
}

score 1 · Answer 1 · edited May 23 '17 at 12:15

1

As shown in this question :

CSS3 background image transition

You'd better use the background position property, because your "hover" image is not loaded in your page.

how to do it : http://www.mightymeta.co.uk/fading-button-background-images-with-css3-transitions/

edited May 23 '17 at 12:15

Community

1
1

answered Aug 27 '13 at 07:24

1

Load only 1 image is more optimized. And "too much coding" makes me laught, 'cause you just have to edit your image and add a line to your css property. – Aug 27 '13 at 07:34

score 0 · Accepted Answer · answered Aug 27 '13 at 07:22

This issue is caused because when people hover an image, then the hover-state image has to be loaded.

What you can do is this:

Load the images in a hidden div. Place the images in the div and then set the div's CSS to display: none; to hide it.

That way, the image will already be loaded in the user browser.

hover transition not working on first click after loading, but works after this?

2 Answers2