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，这将是一个解决方案：

＆＃13;

＆＃13;

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

＆＃13;

.myData1{
  width: 50px;
  height: 50px;
  background-color: #444;
}

.myData2{
  width: 50px;
  height: 50px;
  background-color: #888;
}

#separator{
  width: 50px;
  height: 100px;
  background-color: #666;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需使用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>

试试这个