CSS hover over two different elements and affect one same element

Question

Is there a way on hover two divs to affect one div different ways? The best be to know the solution in CSS way, but if there is no CSS way then I am open to JQuery or Javascript way.

For example when I hover over div myData1, then I affect separator to have some style. And when I hover over div myData2, then I affect separator to be in any other unique way.

 .myData1{ width: 50px; height: 50px; background-color: #444; } .myData1:hover + #separator{ width: 50px; heightL 100px; background-color: #cba; } .myData2{ width: 50px; height: 50px; background-color: #888; } .myData2:hover + #separator{ width: 50px; height: 100px; background-color: #dba; } #separator{ width: 50px; height: 100px; background-color: #666; } 

 <div> <div class="myData1"> </div> <div id="separator"> </div> <div class="myData2"> </div> </div> 

Answer 1

Using jQuery, this would be a solution:

 $('.myData1').mouseover(function() { $('#separator').css('background-color', '#cba'); }); $('.myData1').mouseout(function() { $('#separator').css('background-color', '#666'); }); $('.myData2').mouseover(function() { $('#separator').css('background-color', '#dba'); }); $('.myData2').mouseout(function() { $('#separator').css('background-color', '#666'); }); 

 .myData1{ width: 50px; height: 50px; background-color: #444; } .myData2{ width: 50px; height: 50px; background-color: #888; } #separator{ width: 50px; height: 100px; background-color: #666; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div class="myData1"> </div> <div id="separator"> </div> <div class="myData2"> </div> </div> 

Answer 2

Just with css:

 .wrapper { position: relative; } .myData1 { width: 50px; height: 50px; background-color: #444; } #separator { width: 50px; height: 100px; background-color: #666; position: relative; top: -50px; } .myData2 { width: 50px; height: 50px; background-color: #888; position: relative; top: 100px; } .myData1:hover ~ #separator { background-color: #cba; } .myData2:hover ~ #separator { background-color: #cba; } 

 <div class="wrapper"> <div class="myData1"></div> <div class="myData2"></div> <div id="separator"></div> </div> 

Answer 3

 .data{ position : relative; height:200px; width:50px; display:inline-block } .myData1{ width: 50px; height: 50px; background-color: #444; display:inline-block; position:absolute; top:0px; } .myData1:hover + #separator2{ width: 50px; height: 100px; background-color: blue; display:inline-block; } .myData2{ width: 50px; height: 50px; background-color: #888; display:inline-block; position:absolute; bottom:0px; } .myData2:hover + #separator{ width: 50px; height: 100px; background-color: #dba; } #separator{ width: 50px; height: 100px; background-color: #666; display:inline-block; position:absolute; top:50px; } #separator2{ width: 50px; height: 100px; background-color: #666; display:none; z-index:99999; position:absolute; top:50px; } 

 <div class="data"> <div class="myData1"> </div> <div id="separator2"></div> <div class="myData2"> </div> <div id="separator"></div> </div> 

Try this