css3导航-磊哥

css3导航-磊哥-LMLPHP

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>

.icons
{
    background: url(img/icons.png);
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    display: inline-block;
    border: 0px;

    -webkit-transition:background 0.3s ease-in-out;
    -moz-transition:background 0.3s ease-in-out;
    -o-transition:background 0.3s ease-in-out;
    transition:background 0.3s ease-in-out
}

.icons.facebook
{
background-position: 0px 0px;
}

.icons.facebook.active, a:hover > .icons.facebook
{
background-position: 0px 42px;
}

.icons.twitter
{
background-position: -42px 0px;
}

.icons.twitter.active, a:hover > .icons.twitter
{
background-position: -42px 42px;
}

.icons.events
{
background-position: -84px 0px;
}

.icons.events.active, a:hover > .icons.events
{
background-position: -84px 42px;
}

.icons.rss
{
background-position: -126px 0px;
}

.icons.rss.active, a:hover > .icons.rss
{
    background-position: -126px 42px;
}
    </style>
</head>
<body>
    <div class="social-bar">
          <a href="https://www.facebook.com/w00tms" title="Like us on FaceBook"><div class="icons facebook"></div></a>
          <a href="https://twitter.com/wootstudio" title="Folllow us on Twitter"><div class="icons twitter"></div></a>
          <a href="http://feeds.feedburner.com/wootstudio/articles" title="Stay up to date via RSS"><div class="icons rss"></div></a>
          <a href="/events" title="See what's coming up"><div class="icons events"></div></a>
      </div>
</body>
</html>