纯CSS实现的右侧底部简洁悬浮效果

最新推荐文章于 2024-04-23 13:52:04 发布

3点1415926

最新推荐文章于 2024-04-23 13:52:04 发布

阅读量1.6k

点赞数

文章标签： css html 悬浮

本文链接：https://blog.csdn.net/u010037043/article/details/45460677

版权

一、实现效果：

正常显示鼠标悬停鼠标悬停

前期准备的背景图，本来是透明的，为了显示方便，我将背景色换成了蓝色。

二、实现步骤

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;
}