模拟img的hover切换

最新推荐文章于 2024-05-16 09:53:34 发布

原创最新推荐文章于 2024-05-16 09:53:34 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#img与hover

js 专栏收录该内容

4 篇文章

订阅专栏

博客内容介绍了如何在img标签hover时实现图片切换效果，由于img的url属性不能在CSS中直接设置，通常做法存在对IE低版本支持不佳的问题。通过前辈的建议，找到了一种模拟img hover切换的方法，解决了在不同设备和浏览器上实现这一效果的难题。

关于img:hover；
首先明确一点：img的url属性是无法在css中设置的，所以img:hover{url:’xxx’}是不存在的；
本来可以使用background来当做背景图片设置；但是：

IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。

IE低版本对这个属性支持不完善，不支持背景图片的缩放设置，只能把原图裁到需要的大小（还得再要一个@2x的图片应对retina:
@media only screen and (-webkit-min-device-pixel-ratio: 2){
…….
})
这样就显得过于麻烦了，今天正好又碰到一个需求要在hover时切换图片做一个关闭按钮；问了下前辈得到如下解决方法：

<a class="close-btn">
    <img src="/images/close.png" alt=""/>
</a>
//close.png为23*46px的两个按钮连接起来的图片
.close-btn{
    display: inline-block;width:23px;height:23px;position: relative;overflow: hidden;
}
.close-btn img{
    position: absolute;top:0;width:100%;
}
.close-btn:hover img{
    top:-23px;
}