html+css如何实现鼠标移入按钮显示图片

最新推荐文章于 2024-04-25 15:57:52 发布

沐阳gg

最新推荐文章于 2024-04-25 15:57:52 发布

阅读量3.5k

点赞数 5

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

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

版权

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

36 篇文章 10 订阅

订阅专栏

在下面这种代码中，我要鼠标放入按钮中再显示图片，这种做法该如何做呢

一、代码如下

<!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>  
        img{
            display: none;
        }
        button:hover+img {
            display: block;
        }

    </style>

</head>

<body>
    <div>
        <button>打开</button>
        <img src="images/a01.jpg" alt="">
    </div>
</body>

</html>