鼠標懸停實現顯示與隱藏特效
簡單記錄 - 慕課網 Web前端 步驟四：鼠標懸停實現顯示與隱藏特效
初步掌握定位的基本使用，以及CSS選擇器更高級的運用，完成一個網頁中必會的鼠標經過隱藏顯示特效。
實現了 enen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二維碼的動態效果</title>
<style>
body {
margin: 0px;
}
#box {
width: 100%;
height: 100px;
background-color: black;
position: fixed;
/*bottom:0px; 最下面的 */
bottom: 0px;
/*top: 100px;*/
}
#wechat {
width: 44px;
height: 44px;
background-image: url("imgs/wechat.png");
background-repeat: no-repeat;
background-size: 100%;
margin: 28px auto;
position: relative;
}
#code {
display: none;
width: 180px;
height: 180px;
background-color: white;
background-image: url("imgs/wechatcode.png");
background-repeat: no-repeat;
background-size: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='male.png', sizingMethod='scale');
position: absolute;
left: -66px;
bottom: 70px;
}
#wechat:hover {
background-image: url("imgs/wechatH.png");
}
#wechat:hover>#code {
display: block;
}
</style>
</head>
<body>
<div style="height: 2000px"></div>
<!-- 用於包含二維碼所有的內容，顯示在頁面中的底部 -->
<div id="box">
<!-- 用於顯示微信圖標 -->
<div id="wechat">
<!-- 用於顯示/隱藏二維碼圖片 -->
<div id="code"></div>
</div>
</div>
</body>
</html>
二維碼動態顯示隱藏效果
移動鼠標到微信圖標處 動態顯示二維碼
