位置可以随意调动 写的比较懒。
<!DOCTYPE html>
<html>
<head>
<title>鼠标移上效果</title>
<meta charset="utf-8">
<style type="text/css">
body,html{
margin:0;
padding: 0;
background: #000000;
}
.contact {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid #525252;
color: #ffffff;
}
.contact span{
cursor: pointer;
margin: 0 30px;
display: flex;
}
.contact .icon-qq,
.contact .icon-wx{
position: relative;
display: flex;
}
.contact .icon-qq:hover .contact-qq{
opacity:1;
visibility: visible;
}
.contact-qq{
width: 200px;
line-height: 40px;
position: absolute;
top: 167%;
color: #333;
left: 0;
font-weight: 300;
letter-spacing: 1px;
transition: all .4s ease-in-out;
display: flex;
justify-content: space-around;
align-items: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 0 10px #ddd;
opacity: 0;
visibility: hidden;
background: #ffffff;
}
.contact-qq:after{
content: '';
display:block;
width:0;
height:0;
border-width:0 10px 10px;
border-style:solid;
border-color:transparent transparent #ffffff;
position:absolute;
top:-10px;
left:15%;/* 三角形居中显示 */
/*transform: rotateZ(180deg);*/
}
.contact-qq:before{
content: '';
display:block;
width:0;
height:0;
border-width:0 10px 10px;
border-style:solid;
border-color:transparent transparent #ffffff;
position:absolute;
top:-11px;
left:15%;
/*transform: rotateZ(180deg);*/
}
.contact .icon-qq .contact-qq p,
.contact .icon-wx .contact-wx p{
width: 100%;
height: 100%;
}
.contact-wx{
left: -64px;
top: 180%;
}
.contact-wx:before,
.contact-wx:after{
left: 95px;
}
.contact .icon-wx:hover .contact-wx{
opacity:1;
visibility: visible;
}
</style>
</head>
<body>
<div class="contact">
<div class="icon-qq">
<span>001</span>
<div class="contact-qq">
<p>你好</p>
</div>
</div>
<div class="icon-wx">
<span>002</span>
<div class="contact-qq contact-wx">
<p>你好</p>
</div>
</div>
</div>
</body>
</html>