Siblings

by XcsN

HTML

<div>
    <div></div>
    <div>
        <div></div>
    </div>
</div>
<div>
    <div></div>
</div>
<div>
    <div></div>
    <div></div>
    <div>
        <div></div>
    </div>
</div>
<div>
    <div>
        <div id="testDiv">
            <div>
                <div></div>
                <div></div>
            </div>
            <div></div>
        </div>
        <div></div>
        <div>
            <div></div>
        </div>
    </div>
    <div></div>
</div>

CSS

div {
    float:left;
    margin:10px;
    min-height:40px;
    min-width:50px;
    border-color:black;
    border-width:1px;
    border-style:solid;
    background-color:red;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow: 0px 0px 3px #555;
    -moz-box-shadow: 0px 0px 3px #555;
    -box-shadow: 0px 0px 3px #555;
}
div.hover {
    background-color:green;
    cursor:pointer;
}
div.siblings {
    background-color:blue;
}

JavaScript

$('document').ready(function () {

    function mouseout($this) {
        $this.removeClass('hover');
        try {
            getSiblings($this).removeClass('siblings');
        } catch (err) {
            console.error('error in user code');
        }

    }

    function mouseover($this) {
        $this.addClass('hover');
        try {
            getSiblings($this).addClass('siblings');
        } catch (err) {
            console.error('error in user code');
        }
    }

    $('div').hover(function () {
        //remove the styling from its parent
        var $this = $(this);
        if ($this.parent().is('div')) {
            mouseout($this.parent());
        }
        mouseover($this);
    },

    function () {
        var $this = $(this);
        mouseout($this);
        if ($this.parent().is('div')) {
            mouseover($this.parent());
        }
    })

    function getSiblings($that) {
        return $that.siblings();
    }
})