Css 如何从另一个元素将样式应用于同级元素

我有下一个HTML结构：

<div class="subnavbar">
  <div class="subnavbar-menu">
    <a href="#tab1" class="link1">Link 1</a>
    <a href="#tab2" class="link2">Link 2</a>
  </div>
  <div class="subnavbar-bar">
    <hr />
  </div>
</div>

---

但是什么都不管用，我不知道）：

这是什么鬼东西，选择器

++

哈哈哈，我这辈子都没见过它

无论如何，如果

具有相同的父级，则可以使用相邻的同级选择器执行此操作：

CSS

.link2:hover + .subnavbar-menu hr {
  margin-left: 50%;
}

但是由于它有一个不同的父对象，我不相信这在纯css中是可能的

jQuery

$('.link2').mouseover(function() {
    $('.subnavbar-bar hr').css('marginLeft', '50%');
}).mouseout(function() {
   $('.subnavbar-bar hr').css('marginLeft', 'auto');
});

---

以下是代码笔示例：

如果允许，您可以使用pseudo和float：

hr{
溢出：隐藏；
}
a、 链接2：悬停：之后{
内容：''；
浮动：左；
清除：左；
高度：1米；
宽度：50%；
}
a:以前{
内容：''；
填充：0.5em0；
边缘底部：0.3em；
浮动：左；
}

仅使用CSS和此标记是不可能的。我基于此演示[链接]，但在我的示例中，hr元素位于另一个div上，我完全陷入了

|+| ~

是无效的CSS。以下是CSS选择器的参考：CSS无法做到这一点，您可以通过使用jquery:$（document）解决

指针事件来假装它的平均值（document）.on（'mouseover'，'.link2'，function（）{$（'hr'）.CSS（'margin-left'，'50%'）；}）；lol>|+| ~=元素>。。。或元素+。。。或元素~。。。是的，我的错
$('.link2').mouseover(function() {
    $('.subnavbar-bar hr').css('marginLeft', '50%');
}).mouseout(function() {
   $('.subnavbar-bar hr').css('marginLeft', 'auto');
});