css实战中，时常会碰见鼠标放在某个区块上，显示出一段文字或者其他附加信息。思路是利用position的层叠关系，将文字层放在图片的上面，display:none; hover的时候层 display：block。

效果图

源代码

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-10
*/
<template><div class="container"><div class="top"><h3>hover图片,显示文字或附加层</h3><div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div></div><div class="one"><img :src="imgData"><div class="word">阿米尔·汗（Aamir Khan），1965年3月14日出生于印度孟买，印度宝莱坞演员、导演、制片人。</div></div></div>
</template>
<script>export default {data() {return {imgData: require('@/assets/amierhan.png'),}},}</script>
<style scoped>.container {width: 1000px;height: 580px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: maroon;color: #fff;}.one {width: 500px;height: 300px;position: relative;z-index: 1;cursor: pointer;margin: 50px auto 0;}.one img {width: 500px;height: 300px;}.one .word {display: none;width: 500px;height: 300px;background-color: rgba(179, 8, 10, 0.8);position: absolute;z-index: 2;left: 0;top: 0;padding: 80px 50px;font-size: 20px;color: #fff;font-family: "microsoft yahei";line-height: 30px;text-align: center;box-sizing: border-box;}.one:hover .word {display: block;}.one .word::after {content: "";position: absolute;z-index: 3;width: 120px;height: 1px;background: #fff;bottom: 80px;left: 190px}
</style>