Closest element

by Oski Krawczyk

HTML

<ul>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>

CSS

.active {
    background: red;
}

.current {
    background: yellow;
}

.nw, .ne, .sw, .se {
    background: green;
}

li {
    width: 50px;
    height: 50px;
    float: left;
    background: #ccc;
    margin: 2px;
}

ul {
    width: 360px;
}

JavaScript

var all = document.getElements('li');
var moveBy = 6;
all.each(function(item, index) {
    item.addEvents({
        mouseenter: function() {
            var n = all[index - moveBy];
            var s = all[index + moveBy];
            var w = this.getPrevious();
            var e = this.getNext();

            if (n) {
                n.addClass('active');
                
                var nw = n.getPrevious();
                var ne = n.getNext();

                if (nw) nw.addClass('nw');
                if (ne) ne.addClass('ne');
            }

            if (s) {
                s.addClass('active');
                
                var sw = s.getPrevious();
                var se = s.getNext();
                
                if (sw) sw.addClass('sw');
                if (se) se.addClass('se');
            }

            if (w) w.addClass('active');
            if (e) e.addClass('active');

            this.addClass('current');
        },

        mouseleave: function() {
            all.removeProperty('class');
            this.removeProperty('class');

        }
    });
});