<div class="menu" >
<div class="order">
<a href="#" class="item-l iconfont">
<?= Html::img($this->theme->getAssetUrl('images/icon.png')) ?>
</a>
<span class="tips ta-r">扫一扫</span>
</div>
</div>
<div class="showpic-l">
<?= Html::img($this->theme->getAssetUrl('images/footer-qrcode@2x.png')) ?>
<div>扫码</div>
</div>
此场景是鼠标经过扫码图标,显示二维码图片 ,css样式如下:
.showpic-l {
display: none;
position: absolute;
top: 56px;
right: 310px;
width: 172px;
line-height: 28px;
text-align: center;
padding: 20px 17px 12px 20px;
z-index: 9999;
border: 3px solid #32ccfe;
min-width: 10rem;
font-size: 1rem;
color: #333;
list-style: none;
background-color: #fff;
background-clip: padding-box;
/* border: 1px solid rgba(0, 0, 0, 0.15); */
border-radius: 0.25rem;
}
.showpic-l::before {
position: absolute;
content: "";
width: 0;
height: 0;
border: 20px solid;
top: -43px;
left: 60px;
border-color: transparent transparent #32ccfe;
}
.showpic-l::after {
content: "";
width: 0;
height: 0;
border: 20px solid;
position: absolute;
top: -40px;
left: 60px;
border-color: transparent transparent white;
}
jq如下:(还有很多鼠标经过显示隐藏的写法,更多写法查看jq手册)
//鼠标经过显示二维码
$(".item-l").mouseover(function() {
$(".showpic-l").show();
});
$(".item-l").mouseout(function() {
$(".showpic-l").hide();
});