Question

鼠标移动到图片，出现如下效果，代码是怎么实现的?

鼠标移动到图片，出现如下效果，代码是怎么实现的?图片为天猫网站的截图

Answer 1

使用hover，默认display是none当element:hocer{display:unset}（鼠标移入则显示）

追问

不明白，我查看源码，是在div里用到span，可是我自己做却不能实现，能给下具体代码吗?谢谢🙋详细的点我是新手

追答

<div>
    <span>
        要显示的文字
    </span>
</div>
<style>
    div {
        display: inline-block;//单行的多个元素
        width: 200px;
        height: 200px;
        background: url("背景图片地址") no-repeat 0 0 transparent;//背景图片+不重复+位置为左上角
        background-size: 100% 100%;
    }
    div span{
        display: none;//初始化为不显示span内容
    }
    div:hover {
        background: black;//更改背景颜色
    }
    div:hover span {
        display: unset;//鼠标浮动在上面的时候显示span的内容
    }
</style>

Answer 2

这个很简单的啊

追问

能给一下具体代码吗?谢谢