Javascript CSS悬停在两个不同的元素上，影响同一个元素

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

例如，当我将鼠标悬停在div myData1上时，我会影响separator以获得某种样式。当我将鼠标悬停在divmydata2上时，我会以任何其他唯一的方式影响分隔符

.myData1{
宽度：50px；
高度：50px；
背景色：#444；
}
.myData1:悬停+#分隔符{
宽度：50px；
高度100px；
背景色：#cba；
}
.myData2{
宽度：50px；
高度：50px；
背景色：#888；
}
.myData2:悬停+#分隔符{
宽度：50px；
高度：100px；
背景色：#dba；
}
#分离器{
宽度：50px；
高度：100px；
背景色：#666；
}

---

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

$（'.myData1'）.mouseover（函数（）{
$（“#分隔符”）.css（'background-color'，'#cba'）；
});
$（'.myData1'）.mouseout（函数（）{
$（“#分隔符”）.css（'background-color'，'#666'）；
});
$（'.myData2'）.mouseover（函数（）{
$（'separator'）.css（'background-color'，'dba'）；
});
$（'.myData2'）.mouseout（函数（）{
$（“#分隔符”）.css（'background-color'，'#666'）；
});
.myData1{
宽度：50px；
高度：50px；
背景色：#444；
}
.myData2{
宽度：50px；
高度：50px；
背景色：#888；
}
#分离器{
宽度：50px；
高度：100px；
背景色：#666；
}
使用jQuery，这将是一个解决方案：


$（'.myData1'）.mouseover（函数（）{
$（“#分隔符”）.css（'background-color'，'#cba'）；
});
$（'.myData1'）.mouseout（函数（）{
$（“#分隔符”）.css（'background-color'，'#666'）；
});
$（'.myData2'）.mouseover（函数（）{
$（'separator'）.css（'background-color'，'dba'）；
});
$（'.myData2'）.mouseout（函数（）{
$（“#分隔符”）.css（'background-color'，'#666'）；
});
.myData1{
宽度：50px；
高度：50px；
背景色：#444；
}
.myData2{
宽度：50px；
高度：50px；
背景色：#888；
}
#分离器{
宽度：50px；
高度：100px；
背景色：#666；
}
仅使用css:


.wrapper{
位置：相对位置；
}
.myData1{
宽度：50px；
高度：50px；
背景色：#444；
}
#分离器{
宽度：50px；
高度：100px；
背景色：#666；
位置：相对位置；
顶部：-50px；
}
.myData2{
宽度：50px；
高度：50px；
背景色：#888；
位置：相对位置；
顶部：100px；
}  
.myData1:hover~#分隔符{
背景色：#cba；
}  
.myData2:hover~#分隔符{
背景色：#cba；
}
仅使用css:


.wrapper{
位置：相对位置；
}
.myData1{
宽度：50px；
高度：50px；
背景色：#444；
}
#分离器{
宽度：50px；
高度：100px；
背景色：#666；
位置：相对位置；
顶部：-50px；
}
.myData2{
宽度：50px；
高度：50px；
背景色：#888；
位置：相对位置；
顶部：100px；
}  
.myData1:hover~#分隔符{
背景色：#cba；
}  
.myData2:hover~#分隔符{
背景色：#cba；
}


.data{
位置：相对位置；
高度：200px；
宽度：50px；
显示：内联块
}
.myData1{
宽度：50px；
高度：50px；
背景色：#444；
显示：内联块；
位置：绝对位置；
顶部：0px；
}
.myData1:悬停+#分隔符2{
宽度：50px；
高度：100px；
背景颜色：蓝色；
显示：内联块；
}
.myData2{
宽度：50px；
高度：50px；
背景色：#888；
显示：内联块；
位置：绝对位置；
底部：0px；
}
.myData2:悬停+#分隔符{
宽度：50px；
高度：100px；
背景色：#dba；
}
#分离器{
宽度：50px；
高度：100px；
背景色：#666；
显示：内联块；
位置：绝对位置；
顶部：50px；
}
#分离器2{
宽度：50px；
高度：100px；
背景色：#666；
显示：无；
z指数：99999；
位置：绝对位置；
顶部：50px；
}


.data{
位置：相对位置；
高度：200px；
宽度：50px；
显示：内联块
}
.myData1{
宽度：50px；
高度：50px；
背景色：#444；
显示：内联块；
位置：绝对位置；
顶部：0px；
}
.myData1:悬停+#分隔符2{
宽度：50px；
高度：100px；
背景颜色：蓝色；
显示：内联块；
}
.myData2{
宽度：50px；
高度：50px；
背景色：#888；
显示：内联块；
位置：绝对位置；
底部：0px；
}
.myData2:悬停+#分隔符{
宽度：50px；
高度：100px；
背景色：#dba；
}
#分离器{
宽度：50px；
高度：100px；
背景色：#666；
显示：内联块；
位置：绝对位置；
顶部：50px；
}
#分离器2{
宽度：50px；
高度：100px；
背景色：#666；
显示：无；
z指数：99999；
位置：绝对位置；
顶部：50px；
}

我们可以更改div的顺序吗？如果可以，CSS本身就有一个解决方案，或者我们必须为jQuery提供解决方案。我们可以更改div的顺序吗？如果我们可以在CSS本身中找到解决方案，或者我们必须在jQuery中找到解决方案。@ehsan only CSS^^^这可能会奏效，但遗憾的是，我将在HTML/CSS中生成更多的分隔符，而这个解决方案就像是严格为一个分隔符而设计的，因为您将数据严格地定位在顶部和底部。但是谢谢。@ehsan only css^^^这可能行得通，但遗憾的是，我将在HTML/css中生成更多的分隔符，这个解决方案就像是一个严格为一个分隔符而设计的解决方案，因为您将数据严格地定位在顶部和底部。但是谢谢。这可能对静态元素大小有好处。不幸的是，我的元素必须始终负责屏幕更改。所以我不能接受使用相对定位作为我所寻找的解决方案。也许使用带有静态宽度和高度的普通div来简单说明我的问题是个坏主意，但是谢谢。这可能对静态元素大小有好处。不幸的是