Question

我有一个徽标列表，我希望通过悬停效果来增强它。（徽标颜色＆lt; - ＆gt;标识为黑白）

我有以下标记：

  var sourceToggle = function () {
      var $this = $(this);
      var newSource = $this.data('hover');
      $this.data('hover', $this.attr('src'));
      $this.attr('src', newSource);
  }

  $(function() {
      $('img[data-hover]').each(function() { 
          new Image().src = $(this).data('hover'); 
      }).hover(sourceToggle, sourceToggle);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="url">
    <img src="http://lorempixel.com/200/200/sports/1/" data-hover="http://lorempixel.com/g/200/200/sports/1/">
</a>

到目前为止，此代码工作正常，但我想知道它是否是好的代码，或者我是否可以缩短代码。

此外，我想知道是否可以预加载悬停图像，因为有时它的加载速度不够快，而且我看到了闪烁。

Answer 1

我会删除＆＃39; hover＆＃39; Javascript部分让CSS完成它的工作。运行JS只是为了准备字段，而不是让浏览器放松。

以下是示例代码（也是Fiddle）：

＆＃13;

  $(function () {
      $('img[data-hover]').each(function () {
          var thisImage = $(this);
          var hoverSrc = thisImage.data('hover');
          var hoverImage = $('<img class="bw_image" src="' + hoverSrc + '" />');
          thisImage.after(hoverImage);
      })
  });

＆＃13;

.hovering {
    display: inline-block;
    position: relative;
}
.hovering img {
    display: block;
}
.bw_image {
    position: absolute;
    left: 0;
    top: 0;
    opacity: .01;
    transition: opacity ease-in-out .2s;
}
.bw_image:hover {
    opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="hovering" href="url">
    <img src="http://lorempixel.com/200/200/sports/1/" data-hover="http://lorempixel.com/g/200/200/sports/1/" />
</a> 
<a class="hovering" href="url">
    <img src="http://lorempixel.com/200/200/sports/2/" data-hover="http://lorempixel.com/g/200/200/sports/2/" />
</a>
<a class="hovering" href="url">
    <img src="http://lorempixel.com/200/200/sports/3/" data-hover="http://lorempixel.com/g/200/200/sports/3/" />
</a>

＆＃13;

Answer 2

如果你能够，我会用纯CSS悬停效果和背景图像替换整个事物。

你的悬停图像可以是“预加载”的，如果你用它做一个精灵（一个图像在悬停时轻推），例如：

a {
  display: block;
  background: url('http://i61.tinypic.com/2cxbyaq.png') no-repeat;
  width: 200px;
  height: 200px;
}

a:hover {
  background-position: -200px 0;
}

<a href="url"></a>

使用预加载悬停时交换图像

2 个答案: