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

【问题标题】：How to apply a style to a sibling element from another element如何将样式应用于另一个元素的同级元素
【发布时间】：2017-04-06 21:11:52
【问题描述】：

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

但没有任何效果，我不知道）：

【问题讨论】：

仅使用 CSS 和这个标记是不可能的。
我基于这个演示 [link]codepen.io/rm/pen/ldhon[/link] 但在我的示例中 hr 元素在其他 div 上，我完全卡住了
>|+|~ 是无效的 CSS。这是 CSS 选择器的参考：w3.org/TR/css3-selectors
CSS 无法做到这一点 ，您可以使用pointer-eventscodepen.io/anon/pen/OpYaJo 将其伪装成only
使用 jquery 解决：$(document).on('mouseover', '.link2', function (){ $('hr').css('margin-left', '50% '); });

标签： css html-framework-7

【解决方案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

【讨论】：

lol >|+|~ = element > ... OR element + ... OR element ~ ... 是啊，我的错

【解决方案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 是个坏主意

【讨论】：