CSS中使用Hover显示图片例子

最新推荐文章于 2024-01-16 17:44:28 发布

onizukayao

最新推荐文章于 2024-01-16 17:44:28 发布

阅读量1.2w

点赞数 10

分类专栏： css 文章标签： css html5 hover

本文链接：https://blog.csdn.net/gamenoover/article/details/90246731

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hover显示的例子（二维码）</title>
    <style type="text/css">
    #QRcodeImg{
        background: url(QRcodeImg.png) no-repeat 0px 0px;
        width: 150px;
        height: 150px;
        position: absolute;
        **/*可以覆盖在内容之上，因为采用absolute时，脱离文档流*/**
        z-index:22;
        border: 2px solid green;
        display: none;
    }
    a:hover #QRcodeImg{
        display:block;
    }
    </style>
</head>
<body>
    <div id="head">
        <a href="">二维码
            <div id="QRcodeImg">
            </div>
        </a>
    </div>    
    <div id="body">
        This is content! This is content! This is content! This is content! 
    </div>
</body>
</html>

该例子用于学习CSS中使用Hover时显示图片。
在这里插入图片描述