1

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

我的网站链接页面

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

2 回答 2

1

如这个问题所示：

CSS3背景图片过渡

您最好使用背景位置属性，因为您的“悬停”图像未加载到您的页面中。

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

于 2013-08-27T07:24:04.563 回答
0

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

你可以做的是：

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

这样，图像将已经加载到用户浏览器中。

于 2013-08-27T07:22:41.277 回答