Applying CSS on hover to multiple components [closed]

Question

I have a shape which consists of 3 components:

       *  *****************************  *
     ***  *                           *  ***
   *****  *                           *  *****
 *******  *****************************  *******

As shown in the diagram above, the shape consists of a rectangle surrounded by two triangles (one on the left side and one on the right).

I would like the entire shape to change to the same colour whenever the user hovers over any one of its components.

I've tried using various methods to accomplish this task but without much success.

Here's what I currently have on JSFiddle.

The shape is kind of off, however my main concern is how to get the hover feature working for my object.

Even though I tried implementing JavaScript in the fiddle above, I will accept any other alternative methods that will get my code working.

Answer 1

I've done it like here:

<div class="container">
    ... your code    
</div>


.container:hover .tabStyle{
    background : #000;
    border-color: #000;
}

.container:hover .slopeLeft, .container:hover .slopeRight{
    border-bottom-color: #000;
}

where .container is parent element for your div's

JSFiddle: http://jsfiddle.net/svzrkdu6/12/