模拟img的hover切换

关于img:hover; 首先明确一点:img的url属性是无法在css中设置的,所以img:hover{url:’xxx’}是不存在的; 本来可以使用background来当做背景图片设置;但是:IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。IE低版本对这个属性支持不完善,不支持背景图片的缩放设置,只能把原图裁到
摘要由CSDN通过智能技术生成

关于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=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值