CSS3 (Or jQuery) 이미지 페이드 인

Question

그래서 약간의 코드가 있습니다. 코드를 수정하려면 특정 배경 이미지가 있어야하고, 마우스를 올리면 다른 페이드 이미지가 사라집니다. CSS3 또는 jQuery가 궁금합니다. 하나를 제안하고 싶다면 이것을 달성하는 좋은 방법이 좋습니다.

Answer 1

참조 샘플 :

http://jsfiddle.net/GaYKF/56/

사용 JQuery와 :

$("#myDiv").hover(
function(){ 
    $(this).fadeTo('slow', 0.3, function() 
    { 
     $(this).css('background-image', 'url("http://1.bp.blogspot.com/-tOHKWImzMJQ/TlHqjy1C_II/AAAAAAAAAWw/T5WGegi1sVc/s320/blue+%25288%2529.jpg")'); 
    }).fadeTo('slow', 1); 
}, 
function(){ 
    $(this).fadeTo('slow', 0.3, function() 
    { 
     $(this).css('background-image', 'url("http://1.bp.blogspot.com/-nI97Eqlkfh0/TlHp2CS0_XI/AAAAAAAAAWU/kRGbOd6YNZg/s320/blue+%25281%2529.jpg")'); 
    }).fadeTo('slow', 1); 
}); 

Answer 2

당신이 jQuery를 사용하는 경우, a 요소에 마우스 오버시에 배경 이미지를 변경하려면이 같은 그것을, Mennan의 솔루션을 완료하려면 (이 경우 <div>).

$('#mydiv').mouseenter(function() { 
    $(this).css('background-image','url(/images/second.png)'); 
}).mouseleave(function() { 
    $(this).css('background-image','url(/images/original.png)'); 
});