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>

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>

试试这个

CSS 将鼠标悬停在两个不同的元素上并影响一个相同的元素

CSS hover over two different elements and affect one same element

javascript

css

jquery

elements

hover