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: 
This is not exactly what you are asking but probably helpful.

Sometimes is a suitable solution if you don't want to mess around with js to much.
On the other side it makes your `html` and `css` code messy. I rarely use this in some special situations (e.g. for having a hover effect for column views where the column can have a height of 100% because it should expand the row).

It does not work for older IE versions so if it is used it should be used with caution.

**HTML**

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

```

**CSS**

```
.hover-fake {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: green;
    display: none;
}

.button_container {
    position: relative;
    left: 0xp;
    top: 0px;
}

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

.button_side:hover > .hover-fake  {
    display: block;
}

```

**[JSFiddle](http://jsfiddle.net/65yuA/)**
**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/).