Fade Out Other Element

Fade out all elements that I'm not hovering over.

by Robert Herring

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<div>
    <span class="facebook fa-stack fa-3x">
        <i class="fa fa-stop fa-stack-2x"></i>
        <i class="fa fa-facebook fa-stack-1x"></i>
    </span>
    <span class="twitter fa-stack fa-3x">
        <i class="fa fa-stop fa-stack-2x"></i>
        <i class="fa fa-twitter fa-stack-1x"></i>
    </span>
    <span class="linkedin fa-stack fa-3x">
        <i class="fa fa-stop fa-stack-2x"></i>
        <i class="fa fa-linkedin fa-stack-1x fa-lg"></i>
    </span>
    <span class="pinterest fa-stack fa-3x">
        <i class="fa fa-stop fa-stack-2x"></i>
        <i class="fa fa-pinterest-p fa-stack-1x"></i>
    </span>
</div>

CSS

* { margin:0; padding:0; }
i {
    display: block;
    cursor:pointer;
}
.fa-stack {
    overflow:hidden;
}
.facebook .fa-stop {
    color:#3B5998;
}
.fa-facebook {
    margin:10px 0 0 38px;
    height: 80px;
    width: 42px;
}
.twitter .fa-stop {
    color:#5EA9DD;
}
.linkedin .fa-stop {
    color:#0177B5;
}
.pinterest .fa-stop {
    color:#BD081C;
}
.fa-pinterest-p {
    height: 80px;
    margin:10px 0 0 0;
}
.fa-facebook, .fa-twitter, .fa-linkedin, .fa-pinterest-p {
    font-size:1.6em !important;
}
.fa-stack-1x {
    color:#fff;
    overflow: hidden;
}

JavaScript

$('div span').hover(function() {
    $('div span').not(this).stop().fadeTo( "fast" , 0.3);
}, function() {
    $('div span').not(this).stop().fadeTo( "fast" , 1);
});