[英]How to make transition effect on css sprite hover
Here part of my css sprite code 这是我的css精灵代码的一部分
#IconSet a {
width: 36px;
height: 36px;
display: inline-block;
}
#DeviantArtIcon {
border-width: 0px;
border-style: none;
background-image: url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png);
background-color: transparent;
background-repeat: repeat-x;
background-position: -144px -0px;
width: 36px;
height: 36px;
}
#DeviantArtIcon:hover {
border-width: 0px;
border-style: none;
background-image: url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png);
background-color: transparent;
background-repeat: repeat-x;
background-position: -144px -36px;
width: 36px;
height: 36px;
}
<a id="DeviantArtIcon" href="http://monstermmorpg.deviantart.com" rel="nofollow" target="_blank" title="Monster MMORPG On Deviant Art - Please Watch Our Channel"></a>
Now when this icon hovered i want to have transition effect. 现在,当这个图标悬停时,我希望有过渡效果。 How can i do that ?
我怎样才能做到这一点 ?
I tried here but no luck 我在这里试过但没有运气
CSS Fade Between Background Images on Hover CSS在悬停时背景图像之间淡入淡出
Fade Image Into Another: 将图像淡入另一个:
HTML: HTML:
<a id="deviant-art-icon" href="http://monstermmorpg.deviantart.com"><span></span></a>
CSS: CSS:
#deviant-art-icon {
background:url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png) no-repeat;
display: inline-block;
position: relative;
text-indent: -9999px;
width: 36px;
height: 36px;
background-position: -144px -0px;
}
#deviant-art-icon span {
position: absolute;
top:0;
left:0;
bottom:0;
right:0; background:url(http://static.monstermmorpg.com/images/csssprites/SocialIcons.png) no-repeat;
background-position: -144px -36px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#deviant-art-icon:hover span {
opacity: 1;
}
Demo: http://jsfiddle.net/hxJyw/2/ 演示: http : //jsfiddle.net/hxJyw/2/
1) You haven't applied any transition effects
in your CSS. 1)您尚未在CSS中应用任何
transition effects
。
2) No need to add transition effects in :hover
effect. 2)无需添加过渡效果
:hover
效果。
#DeviantArtIcon {
-o-transition:2s ease-out, background 2s ease-in;
-ms-transition:2s ease-out, background 2s ease-in;
-moz-transition:2s ease-out, background 2s ease-in;
-webkit-transition:2s ease-out, background 2s ease-in;
transition:2s ease-out, background 2s ease-in;
}
Check this in jSFiddle
在
jSFiddle
检查jSFiddle
Hope this is what you're trying. 希望这是你正在尝试的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.