二維碼彈出疊加效果

主要是利用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');
    }
});