Отображение социальных иконок

При наведении пользователя на иконку происходит затухание остальных. Эффект можно реализовать либо только на CSS3, либо на jQuery.

Подключаем в шапке файлы:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/jаvascript" src="js/script.js"></script>

HTML

на CSS3

<ul class="social" id="css3">
    <li class="rss">
        <a href="http://feeds2.feedburner.com/marcofolio"><strong>RSS</strong></a>
    </li>
</ul>

на jQuery

<ul class="social" id="jquery">
    <li class="rss">
        <a href="http://feeds2.feedburner.com/marcofolio"><strong>RSS</strong></a>
    </li>
</ul>

CSS

.social { list-style:none; margin:30px auto; width:464px; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
 text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
 -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
li.rss { background-image:url("../images/rss.png"); }

дополнительные стили для CSS3

#css3:hover li { opacity:0.2; }
#css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
 -moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#css3 li a strong { opacity:0;
 -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;
 -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#css3 li:hover { opacity:1; }
#css3 li:hover a strong { opacity:1; top:-10px; }

JS

только для jQuery:

$(document).ready(function()
{
    // стереть все подсказки
    $("#jquery li").each(function() {
        $("a strong", this).css("opacity", "0");
    });
    
    $("#jquery li").hover(function() { // Mouse over
        $(this)
            .stop().fadeTo(500, 1)
            .siblings().stop().fadeTo(500, 0.2);
            
        $("a strong", this)
            .stop()
            .animate({
                opacity: 1,
                top: "-10px"
            }, 300);
        
    }, function() { // Mouse out
        $(this)
            .stop().fadeTo(500, 1)
            .siblings().stop().fadeTo(500, 1);
            
        $("a strong", this)
            .stop()
            .animate({
                opacity: 0,
                top: "-1px"
            }, 300);
    });
    
});