css - 如何将样式应用于另一个元素的同级元素

Question

我有下一个 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>

我需要申请margin-left: 50%在 <hr> link2 悬停时的元素。

我试过使用:

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

但没有任何效果，我不知道 ):

Answer 1

那个选择器到底是什么 >|+|~大声笑我这辈子从没见过它

无论如何，如果<hr>有相同的父级，你可以用相邻的兄弟选择器来做到这一点:

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

这是代码笔示例:http://codepen.io/StefanBobrowski/pen/qrGJga