css ↓

.wechatBtn {position: relative;}

.wechat {position: absolute; top: 24px; right: -1px; display: none;}

js ↓

function wechatBlock (){

            var wechat = document.getElementsByClassName('wechat');            wechat.style.display = 'block';            console.log('2');}function wechatNone (){             var wechat = document.getElementsByClassName('wechat');            wechat.style.display = 'none';            console.log('3');}window.onload = function(){             var wechatBtn = document.getElementsByClassName('wechatBtn');            wechatBtn.addEventListener('mouseover',wechatBlock);            wechatBtn.addEventListener('mouseout',wechatNone);            console.log('1');}

html ↓

<a class="wechatBtn" href="#">

              关注微信              <div class="QRcode wechat">                    <span>                    订阅号                    </span>                    <span>                    商家服务号                    </span>              </div></a>

事件监听报错

一直报错Cannot set property 'display' of undefined，终于找到原因，getElementsByClassName('');取出的是一个数组，所以要在后面加上[0],或者用querySelector替代getElementsByClassName('');，所以类似的getElementsByTagName('');等等都会出现这个问题。

所以要这样写：

function wechatBlock (){

            var wechat = document.getElementsByClassName('wechat');            wechat[0].style.display = 'block';            console.log('2');}function wechatNone (){             var wechat = document.getElementsByClassName('wechat');            wechat[0].style.display = 'none';            console.log('3');}window.onload = function(){             var wechatBtn = document.getElementsByClassName('wechatBtn');            wechatBtn[0].addEventListener('mouseover',wechatBlock);            wechatBtn[0].addEventListener('mouseout',wechatNone);            console.log('1');}

用jQuery写更简单：

window.onload = function(){

            $('.wechatBtn').mouseover(function(){                 $('.wechat').show();            });            $('.wechatBtn').mouseout(function(){                 $('.wechat').hide();            });}

jQuery很好，但是却有一个小BUG，确切的说这个BUG应该是浏览器事件冒泡所造成的——那就是对于有子元素的父亲同时使用mouseover和mouseout事件并对其进行效果处理（如fadeIn/Out、slideDown/Up...等等）。

window.onload = function(){

            $('.wechatBtn').mouseover(function(){                 $('.wechat').fadeIn("fast");            }).mouseout(function(){                 $('.wechat').fadeOut("fast");            });}

这段代码把鼠标移入.wechat后，就会来回的显示隐藏造成闪烁。不过还是有办法的，可以用hover代替，对执行的动作延迟处理，这样闪烁的问题就解决了，show()和hide()不需要延迟执行，事件冒泡对他们没有影响。

window.onload = function(){

        $(.wechatBtn).hover(

            function(){

                var $btn =  $('.wechatBtn');

                t = setInterval(function(){

                    $btn.children().slideDown(300);

                },300);

           },function(){

                clearInterval(t);

                $(this).children().slideUp();

           }

        );

}

问题解决了！