Question

Attached is an image showing what I’m looking for. As the mouse hovers over boxes all the boxes above the mouse are highlighted. Boxes are totally separate

I cannot for the LIFE of me figure this out!

Thank you for your help.

Answer 1

As you didn’t say anything about your markup, I built something from scratch using jQuery:

JavaScript

$('.container > div').hover(
    function() {
        $(this).prevAll().addClass('active');
    },
    function() {
        $('.container > div').removeClass('active');
    }
);​

HTML

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

CSS

div.container > div {
    width: 100px;
    height: 20px;
    background: #ccc;
}

div.container > div:hover, div.container > div.active {
    background: red;
    color:white;
}

​
DEMO

Try before buy