html - 在不调用 CSS 中的图像 url 的情况下在 Sprite 图像之间淡入淡出

Question

是否可以在悬停时在 Sprite 图像之间淡入淡出而不调用 CSS 中的图像 URL？

我有大量的双图像 Sprite 表。我希望每个元素都可以悬停，但如果我必须为每个元素创建一个带有“背景:url(x)”的新元素，CSS 会显得过于臃肿。

.frame {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

.sprite {
  background: url(image.png) 0px 0px no-repeat;
  position: relative;
  height: 500px;
  width: 500px;
}

.sprite::after {
  content: "";
  background: url(image.png) -500px 0px no-repeat;
  opacity: 0;
  transition: opacity 0.35s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.sprite:hover::after {
  opacity: 1;
  transition: opacity: 0.35s;
}

我宁愿在这里叫他们:

<div class="sprite frame">
    </div>

Here's a JSFiddle of the effect I want , 但我想在 HTML 中调出图像 URL，所以我没有 100 个不同的 CSS 元素调出不同的图像。

Answer 1

嗯。如果您对 jQuery 解决方案持开放态度，这可能会有所帮助。您可以使用“data alt-src”HTML 属性在一个标记中存储两个图像 URL，然后对该类调用 jQuery .hover() 函数。

HTML:

<img class="xyz" data-alt src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

jQuery:

    var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

$(function () {
    $('img.xyz').hover(sourceSwap, sourceSwap);
});

http://jsfiddle.net/LmVRZ/2/

我知道这个演示不包括不透明度过渡，但我认为它可以内置。