鼠标停留在图标显示图片

H5部分

<body>
    <!--代码部分begin-->
    <div class="weixin" onmouseover="this.className = 'weixin on';" onmouseout="this.className = 'weixin';">
        <a href="javascript:;"></a>
        <div class="weixin_nr">
            <div class="arrow"></div>
            <img src="image/wx-sunshj.png" width="100" height="100" />
            关注官方微信
        </div>
    </div>
    <!--代码部分end-->
</body>

CSS部分

* {
    margin: 0;
    padding: 0;
    list-style: none
}

body {
    background: #e49393;
}

.weixin {
    width: 0px;
    height: 0px;
    margin: 0 auto;
    position: relative;
    font-size: 12px;
    font-weight: bolder;
    text-align: center;
}

.weixin a {
    content: url(https://sunshj.top/image/icon_wechat_grey.png);
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    left: -25px;
    top: 0px;
}

.weixin .weixin_nr {
    width: 100px;
    height: 120px;
    border-radius: 4px;
    background: rgb(202, 202, 202);
    padding: 5px;
    text-align: center;
    position: absolute;
    left: -70px;
    top: 40px;
    display: none;
}

.weixin .weixin_nr img {
    margin-bottom: 5px;

}

.weixin .weixin_nr .arrow {
    width: 0;
    height: 0;
    border-bottom: 10px solid rgb(202, 202, 202);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    left: 50px;
    top: -10px;
}

.weixin.on .weixin_nr {
    display: block;


}

.weixin.on a {
    content: url(https://sunshj.top/image/icon_wechat_green.png);
}

Q.E.D.


狸猫控股集团大中华区秘书长