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();

}

);

}

问题解决了！