javascript - CSS 悬停在两个不同的元素上并影响一个相同的元素

Question

有没有办法在悬停两个 div 时以不同的方式影响一个 div？最好是了解 CSS 方式的解决方案，但如果没有 CSS 方式，那么我对 JQuery 或 Javascript 方式持开放态度。

例如，当我将鼠标悬停在 div myData1 上时，我会影响分隔符以具有某种样式。当我将鼠标悬停在 div myData2 上时，我会以任何其他独特的方式影响分隔符。

.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

使用 jQuery，这将是一个解决方案:

$('.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>