При наведении пользователя на иконку происходит затухание остальных. Эффект можно реализовать либо только на CSS3, либо на jQuery.
Подключаем в шапке файлы:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
на CSS3
<ul class="social" id="css3">
<li class="rss">
<a href="http://*****"><strong>RSS</strong></a>
</li>
</ul>
на jQuery
<ul class="social" id="jquery">
<li class="rss">
<a href="http://*****"><strong>RSS</strong></a>
</li>
</ul>
.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; }
только для 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);
});
});