Question

继承我的CSS：

#display {
    background: url('/src/images/icons/display.png') no-repeat 0 0;
    margin-right: 10px;
    height: 49px;
    width: 49px;
    float: left;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#display:hover{
    background: url('/src/images/icons/display.png') no-repeat 0 -49px;
}

将#display作为锚点的ID，当我将鼠标悬停在它上面而不是淡入精灵时它下方的49个像素滑动到它...无论如何要让它淡出？

Answer 1

纯CSS的方法如下：

#display {
    background: url('/src/images/icons/display.png') no-repeat 0 0;
    margin-right: 10px;
    height: 49px;
    width: 49px;
    float: left;
}

#display:after {
    content: "";
    display: block;
    background: url('/src/images/icons/display.png') no-repeat 0 -49px;
    margin-right: 10px;
    height: 49px;
    width: 49px;
    float: left;
        opacity: 0;
-webkit-transition-property: opacity;
   -moz-transition-property: opacity;
     -o-transition-property: opacity;
    -ms-transition-property: opacity;
        transition-property: opacity;
-webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
     -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
        transition-duration: 0.3s;
}

#display:after:hover {
    opacity: 1;
}

这段代码的作用是使用CSS3：after伪元素基本上在顶部创建一个全新的图像，然后在它悬停时将其从透明淡化为不透明。

唯一的问题是Firefox目前是唯一支持淡入淡出的浏览器：before和：after伪元素。

如果你有一个子元素（比如div或元素），你可以这样做：

#display {
    background: url('/src/images/icons/display.png') no-repeat 0 0;
    margin-right: 10px;
    height: 49px;
    width: 49px;
    float: left;
}

#display a {
    display: block;
    background: url('/src/images/icons/display.png') no-repeat 0 -49px;
    height: 49px;
    width: 49px;
    float: left;
        opacity: 0;
-webkit-transition-property: opacity;
   -moz-transition-property: opacity;
     -o-transition-property: opacity;
    -ms-transition-property: opacity;
        transition-property: opacity;
-webkit-transition-duration: 0.3s;
   -moz-transition-duration: 0.3s;
     -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
        transition-duration: 0.3s;
}

#display:hover a {
    opacity: 1;
}

希望有所帮助：）

Answer 2

我不完全确定你要求的是什么，但读就像你在寻求颜色变化渐变的帮助一样？如果是这样的话：

#test {
    background-color: #fff;
    -webkit-transition: background-color 2s linear;
    -moz-transition: background-color 2s linear;
    -o-transition: background-color 2s linear;
    -kthml-transition: background-color 2s linear;
    transition:  background-color 2s linear;
}
#test:hover {
    background-color: #f90;
    -webkit-transition: background-color 2s linear;
    -moz-transition: background-color 2s linear;
    -o-transition: background-color 2s linear;
    -kthml-transition: background-color 2s linear;
    transition:  background-color 2s linear;
    -webkit-transition: background-color 2s linear;
}

JS Fiddle demo

另一方面，如果你想让它淡化元素：

#test {
    background-color: #fff;
    opacity: 0;
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    -kthml-transition: opacity 2s linear;
    transition:  opacity 2s linear;
    -webkit-transition: opacity 2s linear;
}
#test:hover {
    background-color: #f90;
    opacity: 1;
    -webkit-transition: opacity 2s linear;
    -moz-transition: opacity 2s linear;
    -o-transition: opacity 2s linear;
    -kthml-transition: opacity 2s linear;
    transition:  opacity 2s linear;
    -webkit-transition: opacity 2s linear;
}

JS Fiddle demo

CSS3淡入而不是滑动？

2 个答案: