一、实现效果:
正常显示 鼠标悬停 鼠标悬停
前期准备的背景图,本来是 透明的,为了显示方便,我将背景色换成了蓝色。
二、实现步骤
1.将side-bar样式设计好,固定显示在右下角,读取背景图像,利用background-position将各自对应的图标显示在相应的位置。
2.利用hover 选择器实现鼠标指针浮动元素上,元素颜色改变。
3.利用hover 选择器实现鼠标指针浮动在chat-icon上,弹出二维码。
代码如下,注释中有详细介绍。
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="test.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="side-bar">
<a href="#" class="icon-qq"></a>
<a href="#" class="icon-chat">
<div class="chat-tips">
<i></i> <!--弹出框的三角-->
<img style="width:138px;height:138px;" src="img/helloweba.jpg" alt="微信订阅号"></div></a>
<a href="#" class="icon-blog"></a>
<a href="#" class="icon-mail"></a>
</div>
</body>
</html>
.side-bar
{
width:67px;
height:271px;
position: fixed;
bottom: 20px;
right: 25px;
}
.side-bar a ,.chat-tips i
{
width:67px;
height:66px;
display:block;
background-image:url(img/right_bg.png);
background-color:#ddd;
margin-bottom:2px;
}
/*利用background-position将各自对应的图标显示在相应的位置。*/
.icon-qq
{
background-position: 0 -62px;
}
.icon-chat
{
background-position: 0 -130px;
position: relative;
}
.icon-blog {
background-position: 0 -198px;
}
.icon-mail {
background-position: 0 -266px;
}
.chat-tips
{
padding: 20px;
border: 1px solid #d1d2d6;
position: absolute;
right: 78px;
top: -55px;
background-color: #fff;
display: none;
}
.chat-tips i
{
width: 9px;
height: 16px;
display: inline-block;
position: absolute;
right: -9px;
top: 80px;
background-position:-88px -350px;
background-color:white;
}
.chat-tips img
{
width: 138px;
height: 138px;
}
.side-bar a:hover
{
background-color: #669fdd;
}
.icon-chat:hover .chat-tips
{
display: block;
}