Question: First, let's review my code: 

HTML:

```
<div class="button_container">
    <div class="inner_button">
        <a href="#" class="button_text">Button</a>
    </div>
    <div class="button_side">
        <i class="play" />
    </div>
</div>

```

CSS:

```
.inner_button:hover {
    background: red;
}
.button_container:hover > .button_side { 
    background-color: red !important; 
}

```

The above code will let `.button_side` hover if `.button_container` is hovered. But now I also want to do the reverse, so that if `.button_side` is hovered it will hover `.button_container`. I believe with CSS it will be difficult but I would prefer it but I am open to something in JQuery. How can I do this?

Answer: 
> 
> *"I also want to do the reverse, so that if `.button_side` is hovered it will hover `.button_container`"*
> 
> 
> 

I believe you are correct about needing to use JS for this (easy with some jQuery), because CSS tends to work from parents to children, not the other way around. First define a class to add with the desired setting(s):

```
.hover {
    background : red;
}

```

And then:

```
$(".button_side").mouseenter(function() {
    $(this).closest(".button_container").addClass("hover");
}).mouseleave(function() {
    $(this).closest(".button_container").removeClass("hover");
});

```

Demo: <http://jsfiddle.net/PxQCT/>

Within a jQuery event handler, `this` (usually) refers to the element that the event applied to, so `$(this)` gives you a jQuery wrapper to the hovered item and lets you use jQuery's `.closest()` method to find the nearest ancestor with the `.button_container` class.

Note that the JS code that I've shown would need to be included in a script element that appears after the elements in question, and/or in a document ready handler.

EDIT / P.S.: Note that in your markup as shown in the question the `.button_side` element doesn't actually have any hoverable content, just an empty (self-closing) `<i>` element (so in my demo I added some content there so that you could have something to hover over and see it working).
**I think you can do something like this (with jQuery):**

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

    $('.button_side').hover(function(){
        $('.button_container').addClass('hover');        
    }, function(){
        $('.button_container').removeClass('hover');
    });

});

```

If you need some help, try to see this [jsfiddle](http://jsfiddle.net/59YqL/).