解决伪元素设置图片鼠标浮上会闪烁问题

问题描述：

4个导航按钮，都有hover二态，在某些情况下我需要把按钮图片放在伪类里，在谷歌浏览器上刷新后鼠标浮上图片会闪一下，下面是css代码

 &:nth-of-type(1) {

        top: 33px;

        &:after {
          width: 20px;
          height: 86px;
          position: absolute;
          content: '';
          top: 42px;
          left: 22px;
          background-image: url(../img/pc/nav.png);
          background-position: -76px 0;
          background-repeat: no-repeat;
        }


        &:hover {

          &:after {
            display: block;
            cursor: pointer;
            background-image: url(../img/pc/nav.png);
            background-position: -96px 0;
          }
        }
      }

解决办法

一、将按钮图片一态二态都合成雪碧图（这个方法最有效）
二、对hover设置延迟时间
将hoverDelay的方法挂在jquery原型上

$.fn.hoverDelay = function (options) {
  var defaults = {
    hoverDuring: 200,
    outDuring: 200,
    hoverEvent: function () {
      $.noop() //如果没有传递回调函数，就作为空函数代替执行
    },
    outEvent: function () {
      $.noop()
    }
  }
  var sets = $.extend(defaults, options || {})//将传入的参数合并到默认参数中
  var hoverTimer
  var outTimer
  return $(this).each(function () {
    $(this).hover(function () {
      clearTimeout(outTimer)
      hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring)
    }, function () {
      clearTimeout(hoverTimer)
      outTimer = setTimeout(sets.outEvent, sets.outDuring)
    })
  })
}


$('').hoverDelay(
hoverDuring: 600,
    outDuring: 200,
    hoverEvent: function () {
      console.log(111)
    },
    outEvent: function () {
      console.log()
    })