CSSで画像URLを呼び出さずにスプライト画像をフェーディングする

Question

CSSの画像URLを呼び出さずに、ホバー上のスプライト画像をフェードインできますか？

私は2画像のスプライトシートを1トン持っています。私は各自がホバリングをオンにしたいのですが、 "background：url（x）"を持つすべての要素に対して新しい要素を作成する必要がある場合は、CSSが非常に膨らんでしまいます。

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

Here's a JSFiddle of the effect I wantが、私はHTMLで画像のURLを呼びたいので、私は呼ん100個の異なる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; 
} 

私はむしろ、ここでそれらを呼びたいです異なる画像。

Answer 1

Hmm。 jQueryソリューションを公開している場合、これが役に立ちます。 "data alt-src" HTML属性を使用して、2つの画像URLを1つのタグに格納し、そのクラスに対して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/

私はこのデモは、不透明度遷移が含まれていませんが、私はそれが組み込まれることができると思い実現