css - 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]
          }
    });

});