完整范例代码
<template> <div style="padding: 20px"> <img src="https://mat1.gtimg.com/www/mb/images/face/104.gif"> </div> </template> <style scoped> img:hover { content: url(https://mat1.gtimg.com/www/mb/images/face/105.gif); } </style>
实现原理
在hover样式中，给img添加content属性，值为另一张图片即可！
注意事项：Chrome浏览器下，所有的元素都支持content属性，而其他浏览器仅在::before/::after伪元素中才支持，所以此技巧只适用于Chrome内核的浏览器。
content属性改变的仅仅是视觉呈现，当我们以右键或其他形式保存这张图片的时候，所保存的还是原来src对应的图片。
不仅图片可以使用content属性替换，其他标签也可以，而且兼容性可能更好！
<template> <div style="padding: 20px"> <h1>好困啊！</h1> </div> </template> <style scoped> h1 { content: url(https://mat1.gtimg.com/www/mb/images/face/104.gif); } </style>
