<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>css鼠標懸停彈出網頁內容文字</title>
<style>
*{ margin: 0; }
body { font-family: "Microsoft Yahei",Arial,sans-serif; padding:100px; text-align:center;}
a{text-decoration:none;padding:5px 8px;line-height:200%;}
a:link,a:visited{color:#0180CF;}
a:hover,a:active{background:#0180CF;color:white;}
//以下是關鍵css
.mabida {position:relative; }
.mabida .aiyaha { position: absolute; left: 0px; top: 30px; z-index:999; display: none;}
.mabida:hover .aiyaha { display: block;}
.mabida .aiyaha { background-color:white; color:blue; border:1px #006AA8 solid; }
.mabida .aiyaha img { width:138px; margin:12px; }
.mabida .aiyaha div { width:138px; margin:12px; }
</style>
</head>
<body>
<div >
<a href="" target="_blank" class="mabida">鼠標過來1
<div class="aiyaha">
<h3>二維碼001</h3>
<img src="code.png" alt="圖片就自己放吧">
</div>
</a>
<a href="" target="_blank" class="mabida">鼠標過來2
<div class="aiyaha">
<h3>文字內容2</h3>
<div>這裏是文字內容2</div>
</div>
</a>
<br>
<a href="" target="_blank" class="mabida">鼠標過來3
<div class="aiyaha">
<h3>文字內容3</h3>
<div>這裏是文字內容3</div>
</div>
</a>
</div>
</body>
</html>
