- 技术博客
- 编辑一名字右下角出现图片
<!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
;
****
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时显示图片。
