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 悬停时，我需要在margin-left: 50%元素上应用<hr>。

我尝试过使用：

.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

选择器>|+|~ lol在我生命中从未见过它

无论如何，如果<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');
});

以下是codepen示例：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是一个坏主意

如何将样式应用于另一个元素的兄弟元素

2 个答案: