Question

在我的网站页面上，扬声器和麦克风上的悬停过渡效果在加载后第一次点击时会丢失，但在重复尝试后会起作用。这只发生在麦克风和第一个扬声器画面上。其余图片正常工作。这是为什么？

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

Answer 1

如此问题所示：

CSS3 background image transition

您最好使用背景位置属性，因为您的＆＃34; hover＆＃34;图片未加载到您的页面中。

怎么做：http://www.mightymeta.co.uk/fading-button-background-images-with-css3-transitions/

Answer 2

导致此问题是因为当人们悬停图像时，必须加载悬停状态图像。

你可以做的是：

将图像加载到隐藏的div中。将图像放在div中，然后将div的CSS设置为display：none;隐藏它。

这样，图像就会在用户浏览器中加载。

加载后悬停转换不能在第一次点击时工作，但在此之后工作？

2 个答案: