优化网站退出按钮，提高用户体验

在做网站右上角的退出登入时，须要滑鼠移到头像上显示退出按键，移出时不显示退出按键。另外头像和退出按键是同级元素，同在一个父元素中。倘若直接用hover来做的话，当键盘从头像移到退出按键时，退出按键总是不显示，由于退出按键的父元素并不是头像元素，因而不能通过css式样实现。

只能通过js来实现了。注意：这时须要在隐藏的js中加一个定时器，延时200ms再隐藏。代码如下：

hideMore: function (tagBox) {
            var $dom = $(tagBox);
            // $dom.stop(true, true).hide();
            this.timer = setTimeout(function () {
                $dom.stop(true, true).hide();
            }, 200)
        }

之后再在显示的方式中去除这个定时器：

showMore: function (tagBox) {
            var $dom = $(tagBox);
            $dom.stop(true, true).show();
            clearTimeout(this.timer);
        },

完整的代码如下：

html结构：

  
  退出

js:

var userHover = {
        timer: null,
        showMore: function (tagBox) {
            var $dom = $(tagBox);
            $dom.stop(true, true).show();
            clearTimeout(this.timer);
        },
        hideMore: function (tagBox) {
            var $dom = $(tagBox);
            // $dom.stop(true, true).hide();
            this.timer = setTimeout(function () {
                $dom.stop(true, true).hide();
            }, 200)
        }
    }
    $(".headImg").mouseenter(function () {
        userHover.showMore('.logout')
    })
    $(".headImg").mouseleave(function () {
        userHover.hideMore('.logout')
    })
    $(".logout").hover(
        function () {
            userHover.showMore('.logout')
        },
        function () {
            userHover.hideMore('.logout')
        }
    )