在精灵图像之间褪色，而无需在CSS中召集图像URL

Question

是否有可能在悬停在悬停图像之间褪色，而不会在css中呼唤图像URL？

我有大量的两图板床单。我希望每个人都可以打开悬停，但是如果我必须为每个具有"背景：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>

这是我想要的效果的jsfiddle，但是我想在html中喊出图像URL，所以我没有100个不同的CSS元素呼叫不同的图像。

Answer 1

hmm。如果您可以使用jQuery解决方案，这可能会有所帮助。您可以使用" Data Alt-SRC" HTML属性将两个图像URL存储在一个标签中，然后在该类上调用jQuery .Hover .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/

我意识到此演示不包括不透明度过渡，但我认为它可以内置。