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

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>

当 link2 悬停时，我需要在 <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%; 
}
.subnavbar .subnavbar-menu a.link2:hover ~ .subnavbar-bar hr { 
   margin-left: 50%; 
}

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

Answer 1

那个选择器到底是什么>|+|~哈哈我这辈子都没见过

无论如何，如果 <hr> 具有相同的 parent，您可以使用相邻的兄弟选择器执行此操作：

CSS

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

但是因为它有一个不同的 parent 我不相信这对纯 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

Answer 2

如果 BFC 允许，您可以使用伪和浮点数：

hr {
  overflow:hidden;
}

a.link2:hover:after {
  content:'';
  float:left;
  clear:left;
  height:1em;
  width:50%;
}

a:before {
  content:'';
  padding:0.5em 0;
  margin-bottom:0.3em;
  float:left;
}

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

或指针事件

hr {
  overflow:hidden;
}
.subnavbar-menu {
  pointer-events:none;
}
.subnavbar-menu:hover:after {
  content:'';
  float:left;
  clear:left;
  height:1em;
  width:50%;
}
.subnavbar-menu a {
  pointer-events:auto;
}
a:after {
  content:'';
  padding:0.5em 0;
  margin-bottom:0.3em;
  float:left;
}

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

免责声明： （恰好您想要的选择器和样式可以被伪造）

float容易断
pointer-events 是个坏主意

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

How to apply a style to a sibling element from another element

css

html-framework-7