CSS에서 이미지 URL을 호출하지 않고 스프라이트 이미지를 페이드 화

Question

CSS에서 이미지 URL을 호출하지 않고도 호버에있는 스프라이트 이미지를 페이드 아웃 할 수 있습니까?

두 이미지 스프라이트 시트 톤이 있습니다. 나는 각 사람이 호버를 켜기를 원한다. 그러나 "배경 : 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

흠. 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/

내가 불투명도 전환을 포함하지 않는이 데모를 실현 그러나 나는이 내장 될 수 있다고 생각