鼠标点击跳转临时窗口，悬浮时出现联系方式

 

点击QQ咨询打开QQ临时会话窗口

鼠标经过出现具体联系方式

html-css-js

<div class="right_kefu">
        <!-- QQ -->
        <!-- 修改中间QQ号 -->
        <a class="item-qq" 
        href="tencent://message/?uin=174***5734&Site=QQ&Menu=yes"
        onmouseover="show('show-qq')"
        onmouseout="invisible('show-qq')">
            <img src="./right/img/qq.png" alt="" id="qq-box">
            <p>QQ咨询</p>
            <div class="show-qq">
                <div>客服QQ：190***4973</div>
            </div>
        </a>
        <!-- 微信 -->
        <!-- 放入微信二维码 -->
        <div class="item-weixin" 
        onmouseover="show('show-weixin')"
        onmouseout="invisible('show-weixin')">
        <img src="./right/img/微信.png" alt="" id="qq-box">
            <p>微信咨询</p>
            <div class="show-weixin">
                <div><img src=" " /></div>
            </div>
        </div>
        <!-- 电话联系 -->
        <!-- 修改电话号码 -->
        <a class="item-dianhua" href="tel:180****5425" 
        onmouseover="show('show-dianhua')"
        onmouseout="invisible('show-dianhua')">
            <img src="./right/img/电话.png" alt="" id="qq-box">
            <p>电话咨询</p>
            <div class="show-dianhua">
                <div>客服电话：181****3668</div>
            </div>
        </a>
    </div>

.right_kefu {
    position: fixed;
    right: 6px;
    top: 26%;
    min-height: 200px;
    width: 70px;
    z-index: 999;
    font-size: 14px;
}
.item-qq,.item-weixin,.item-dianhua{
    float: left;
    position: relative;
    width: 100%;
    height: 70px;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0px 1px 7px 0px #b1b1b1;
    padding-top: 7px;
    margin-bottom: 10px;
}
a:active, a:hover {
    outline: 0;
}
a {
    color: #333;
    text-decoration: none;
}
/* 背景色 */
.item-qq{
    background: #2196F3;
}
.item-weixin{
    background: #38b110;
}
.item-dianhua{
    background: #1050b1;
}

/* 图标大小 */
#qq-box{
    width: 30px;
}
/* 清除p标签的外边距 */
p {
    margin: 0;
}
/* 点击后显示 */
.show-qq,.show-weixin,.show-dianhua{
    color: black;
   display: none; 
}
/* QQ、电话 */
.show-qq,.show-dianhua{
    width: 200px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    transform: translate(-220px,-50px);
    box-shadow: 0 0  20px #cdcdcd;
}
/* 三角形 */
.show-qq::after,.show-weixin:after,.show-dianhua::after{
    z-index: 10;
    content: '';  
    display: block;  
    position: absolute;
    top: 5px;
    left: 200px;
    border-top: 15px solid transparent;  
    border-bottom: 15px solid transparent;  
    border-left: 15px solid #cdcdcd; 
    opacity: .4;
}
/* 微信 */
.show-weixin{
    transform: translate(-220px,-200px);
    box-shadow: 0 0  20px #cdcdcd;
    width: 200px;
    height: 200px;
}
.show-weixin:after{
    position: absolute;
    top: 160px;
    left: 200px;
}
.show-weixin img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 150px;
}

function show(showClass){
    document.getElementsByClassName(showClass)[0].style.display = 'block'
}

function invisible(invisibleClass){
    document.getElementsByClassName(invisibleClass)[0].style.display = 'none'
}