html+css如何实现鼠标移入链接显示图片

最新推荐文章于 2023-05-19 13:48:42 发布

沐阳gg

最新推荐文章于 2023-05-19 13:48:42 发布

阅读量2.8k

点赞数 2

分类专栏： html从入门到入土文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_52545155/article/details/128011848

版权

html从入门到入土专栏收录该内容

36 篇文章 10 订阅

订阅专栏

html+css如何实现鼠标移入链接显示某一个东西，这种案例对于大家伙儿来说是经常会用到的，小魏在这儿分享给大家

一、代码准备

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 span {
            display: none;
            width: 500px;
            height: 500px;
            background: url(images/a01.jpg) no-repeat center center;
        }

        .div1 a {
            cursor: pointer;
        }

        .div1 a:hover span {
            display: block;

        }
    </style>

</head>

<body>
    <div class="div1">
        <a>显示<span></span></a>
    </div>
</body>

</html>