[laimas]

Нашел похожее:
http://jsfiddle.net/kkLgs1yv/2/
Только как реализовать с моей версткой?

Можно так:

<style>
.show {
    cursor: pointer;
}

.mark {
    background-color: #00f;
}

.light {
    background-color: #ddd;
}
</style>
<div>
<div class="show">111111111</div>
<div class="show">222222222</div>
<div class="show">333333333</div>
<div class="show">444444444</div>
<div class="show">555555555</div>
<div class="show">666666666</div>
<div class="show">777777777</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
    var el = $('div.show').click(function() {
       el.removeClass('light').not($(this).toggleClass('mark')).removeClass('mark');
    }).mouseenter(function() {
        var a = $(this), 
            b = a.index(), 
            c = a.siblings('.mark').index();
            
        el.removeClass('light');
        
        if(~c) (b < c ? el.slice(b, c) : el.slice(c+1, b+1)).addClass('light')  
        
    }).mouseleave(function() {
        el.removeClass('light')
    })
});
</script>