二维码弹出叠加效果

摘要: 鼠标移动到到某个图文区域，自动弹出二维码覆盖该区域；鼠标移开，二维码自动隐藏。

主要是利用

mouseover

事件，进行元素和边界判定，从而自动弹出或隐藏二维码。

HTML结构如下：

<ul class="tuijian">
<li>
<img src="abc.jpg">
<div class="ewm"><img src="qrcode.png"></div>
<h3>abc图片描述</h3>
<h4>更多的文字描述</h4>
</li>
<!-- 以下结构相同，省略 -->
</ul>

CSS定义如下：

.tuijian {
margin-top: 20px;
margin-left: -6px;
padding: 0 20px;
white-space: nowrap;
overflow: hidden;
}

.tuijian>li {
display: inline-block;
}

.tuijian>li+li {
margin-left: 12px;
}

.tuijian>li>img {
width: 236px;
height: 236px;
}

.tuijian>li>h3 {
margin-top: 16px;
margin-bottom: 16px;
width: 236px;
overflow: hidden;
text-overflow: ellipsis;
padding: 0;
font-size: 18px;
font-weight: normal;
}

.tuijian>li>h4 {
margin-top: 0;
margin-bottom: 0;
padding: 0;
font-size: 16px;
font-weight: normal;
color: #666;
}

.tuijian .ewm {
display: none;
position: absolute;
margin-top: -236px;
width: 236px;
height: 236px;
padding: 18px 17px;
background-color: rgba(0, 0, 0, .4);
}

.tuijian .ewm>img {
width: 200px;
height: 200px;
}

架子已搭好，可以绑定鼠标事件了：

$('.tuijian').on('mouseover', function (e) {
var tn = e.target.tagName;
if (0 > ['UL', 'LI', 'IMG', 'DIV'].indexOf(tn)) return; // 尽可能减少判定次数
var tc = e.target.className,
pc = e.target.parentNode.className;
if (tn === 'IMG') { // show
$(e.target).siblings('.ewm').slideDown('fast');
} else if (tc !== 'ewm' && pc !== 'ewm') { // hide
$('.ewm').slideUp('fast');
}
});