<div class="right_icon icon-phone"> <a href=""><img src="img/icon_01.png" alt=""></a> <div class="icon_phone"><p>CBO Butterfly</p>(+86) 11111111111</div> </div> <div class="right_icon icon-twitter" onclick="window.open('twitter.com')"> <img src="img/icon_02.png" alt=""> <div class="icon_phone">twitter.com</div> </div> <div class="right_icon icon-email" onclick="window.open('mailto:')"> <img src="img/icon_03.png" alt=""> <div class="icon_phone">service</div> </div> <div class="right_icon icon-tme" onclick="window.open('https://www.csdn.net/')"> <img src="img/icon_04.png" alt=""> <div class="icon_phone">https://www.csdn.net/</div> </div>
.right_icon { width: 40px; margin:0 12px; cursor: pointer; position: relative; } .right_icon img{ width: 40px; } .right_icon a{ display: block; width: 100%; height: 100%; } .icon-phone{ margin-left: 0; } .right_icon:hover .icon_phone{ /*width: 196px;*/ /*border: solid 1px #333333;*/ visibility: visible; opacity: 1; } .right_icon .icon_phone{ width: 232px; height: 40px; line-height: 40px; font-size: 12px; background: #222222; position: absolute; bottom: 121%; color: #ddd; left: 0; border:1px solid #333; font-weight: 300; letter-spacing: 1px; transition: all .4s ease-in-out; visibility: hidden; opacity: 0; display: flex; justify-content: space-around; align-items: center; } .right_icon .icon_phone:after{ content: ''; display:block; width:0; height:0; border-width:0 10px 10px; border-style:solid; border-color:transparent transparent #222222; position:absolute; bottom:-10px; left:4%;/* 三角形居中显示 */ transform: rotateZ(180deg); } .right_icon .icon_phone:before{ content: ''; display:block; width:0; height:0; border-width:0 10px 10px; border-style:solid; border-color:transparent transparent #444; position:absolute; bottom:-11px; left:4%; transform: rotateZ(180deg); } .icon-phone .icon_phone{ flex-wrap: wrap; height: 70px; letter-spacing: 2px; } .icon-phone .icon_phone p{ width: 100%; height: 20px; line-height: 45px; text-align: center; font-size: 12px; margin-bottom: 0; } .icon-twitter .icon_phone{ left: -63px; } .icon-twitter .icon_phone:before, .icon-twitter .icon_phone:after{ left: 32%; } .icon-email .icon_phone{ left: -128px; } .icon-email .icon_phone:before, .icon-email .icon_phone:after{ left: 60%; } .icon-tme .icon_phone{ left: -299px; width: 340px; } .icon-tme .icon_phone:before, .icon-tme .icon_phone:after{ left: 91%; } .right_icon .icon_phone:hover{ color: #fff; }
如果发生报错,请查看一下类名,类名我换了一下。