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**](http://www.quickcall.me/fdsf)

```
.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;
}

```