hover effect for outside class

Question

I have a 3 block of image. I want a css in which hover a block A transform block C and B, hovering a block B transform block A and C or hovering a block C transform block A and B You can see a demo of what i want in JSFiddle

<p>Hover over 7 and both 8 and 9 get styled.</p>
<div id="seven" class="box">7</div>
<div id="eight" class="box">8</div>
<div id="nine" class="box">9</div>

#nine:hover ~ #seven,
#seven:hover ~ .box {
    background-color: black;
    color: white;
}
#eight:hover ~ .box {
    background-color: black;
    color: white;
}
#nine:hover ~ .box {
    background-color: black;
    color: white;
}

.box {
    cursor: pointer;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    outline: 1px solid black;
    text-align: center;
    width: 30px;
}

Answer 1

With jQuery it is possible as follows:

 $('.box').hover(function() { $('.box').not(this).addClass('hover'); }, function() { $('.box').removeClass('hover'); }); 

 .box { cursor: pointer; display: inline-block; height: 30px; line-height: 30px; margin: 5px; outline: 1px solid black; text-align: center; width: 30px; } .box.hover { background-color: black; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p>Hover over 7 and both 8 and 9 get styled.</p> <div id="seven" class="box">7</div> <div id="eight" class="box">8</div> <div id="nine" class="box">9</div> 

Answer 2

You can wrap the div 's in a container and use the container's hover event to achieve the desired output.

Check demo in JSFiddle

 .box { cursor: pointer; display: inline-block; height: 30px; line-height: 30px; margin: 5px; outline: 1px solid black; text-align: center; width: 30px; } .wrapper:hover .box { background-color: black; color: white; } .wrapper:hover .box:hover { background-color: white; color: black; } 

 <p>Hover over 7 and both 8 and 9 get styled.</p> <div class="wrapper"> <div id="seven" class="box">7</div> <div id="eight" class="box">8</div> <div id="nine" class="box">9</div> </div>