css小技巧——鼠标悬浮时切换图片

完整范例代码

<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>