鼠标放上显示图片

erdouzhang

于 2017-03-22 11:27:27 发布

阅读量1.9k

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/erdouzhang/article/details/64906403

版权

html+css 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的鼠标悬停显示图片的技术。通过设置特定的CSS样式，可以在用户将鼠标悬停在指定元素上时显示一张图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在线展示

这里写图片描述

鼠标放上显示图片

html:

<body>
  <div class="box">
    <a href="#">
      <span>二维码</span>
      <img src="img/二维码.jpg" alt="扫一扫">
    </a>
  </div>
</body>

css:

<style>
    .box a {
        text-decoration: none;
        font-size: 14px;
        color: #888;
    }

    .box a:hover {
        text-decoration: none;
    }

    .box img {
        display: none;
        width: 100px;
        height: 100px;
        position: absolute;
        /*如果大盒子不想被撑开高或者图片位置不是想要的位置，就给定位子绝父相，*/
        left: 0;
        top: 30px;
    }

    .box a:hover>img {
        /*鼠标放在a上图片显示*/
        display: block;
    }
</style>