css小技巧

您所在的位置:网站首页 html鼠标移动图片变换 css小技巧

css小技巧

2024-07-14 18:30| 来源: 网络整理| 查看: 265

完整范例代码 img:hover { content: url(https://mat1.gtimg.com/www/mb/images/face/105.gif); } 实现原理

在hover样式中,给img添加content属性,值为另一张图片即可! 

注意事项:Chrome浏览器下,所有的元素都支持content属性,而其他浏览器仅在::before/::after伪元素中才支持,所以此技巧只适用于Chrome内核的浏览器。

content属性改变的仅仅是视觉呈现,当我们以右键或其他形式保存这张图片的时候,所保存的还是原来src对应的图片。

不仅图片可以使用content属性替换,其他标签也可以,而且兼容性可能更好!

好困啊! h1 { content: url(https://mat1.gtimg.com/www/mb/images/face/104.gif); }

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3