Hover over link and decrease opacity of other links

Hover over link and decrease opacity of other links

by Nirvanachain

HTML

<a href="#" class="hoverable">Hello 1</a>
<a href="#" class="hoverable">Hello 2</a>
<a href="#" class="hoverable">Hello 3</a>

CSS

.hoverable {
    display: block;
    float: left;
    padding: 10px;
    text-decoration: none;
    margin-right: 10px;
    background: #000;
    color: #fff;
    opacity: 1;
}

JavaScript

$(document).ready(function() {
    var hoverable = $('.hoverable');

    if (hoverable.length) {
        hoverable.on('mouseenter', function(event) {
            show(this);
        });

        hoverable.on('mouseleave', function(event) {
            var active = $('.hoverable:hover');
            if (active.length < 1) {
                showAll();
            }
        });
    }
    
    var show = function(element) {
        element = $(element);
        if (element.length) {
            element.stop().animate({'opacity': '1'});

            var others = hoverable.not(element);
            others.stop().animate({'opacity': '0.1'});
        }
    };

    var showAll = function() {
        hoverable.stop().animate({'opacity': '1'});
    };
});