Mootools 1.4.3背景淡化效果

Question

所以我有代碼交換背景，我遇到的問題是將淡入淡出效果納入其中。我已經搞砸了一段時間了，我只是感到沮喪。所以代碼就在那裏，看你如何破解這個工作。

MooTools的1.4.3

.socialIconsFB { 
    float: right; 
    display: block; 
    margin: -20px 3px; 
    width: 48px; 
    height: 57px; 
    background-image: url(XXXXXX/social_icons/facebook.png); 
} 

<div class="socialIconsFB"></div> 


$$('.socialIconsFB').each(function(socialIconsFB) { 
    socialIconsFB.addEvent('mouseover', function() { 
     this.tween("background-image", "url(XXXXXX/social_icons/facebook.png)", "url(XXXXXX/social_icons/facebook_highlight.png)"); 
    }); 
    socialIconsFB.addEvent('mouseout', function() { 
     this.tween("background-image", "url(XXXXXX/social_icons/facebook.png)"); 
    }); 
}); 

Answer 1

我認爲「補」的效果不能與「背景圖片」工作，但與「背景顏色」 工作，我會嘗試這種方式：

HTML：

<div class="socialIconsFB"> 
    <span></span> 
</div> 

CSS：

.socialIconsFB { 
     float: right; 
     display: block; 
     margin: -20px 3px; 
     width: 48px; 
     height: 57px; 
     background-image: url(XXXXXX/social_icons/facebook.png); 
} 
.socialIconsFB span{ 
    margin:0; padding:0; 
    opacity:0; filter:alpha(opacity=0); 
    width:100%; 
    height:100%; 
    background-image: url(XXXXXX/social_icons/facebook_highlight.png); 
} 

JAVASCRIPT：

$$('.socialIconsFB').each(function(socialIconsFB) { 
    socialIconsFB.addEvents({ 
     'mouseenter': function(){ 
       this.getChildren('span').tween("opacity", 1); 
       //it could be: this.getChildren('span')[0] 
      }, 

     'mouseleave': function(){ 
       this.getChildren('span').tween("opacity", 0); 
       //it could be: this.getChildren('span')[0] 
      } 
    }); 

});