如何将样式应用于另一个元素中的同级元素 [英] How to apply a style to a sibling element from another element

问题描述

我有下一个HTML结构:

I have the next HTML structure:

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

I need to apply margin-left: 50% on <hr> element when link2 is hover.

我尝试使用:

.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%; 
}

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

But nothing work, I have no idea ):

推荐答案

选择器> | + |〜大声笑是我一生中从未见过的

What the heck is that selector >|+|~ lol never have seen it in my life

无论如何，如果< hr> 具有相同的父代，则可以使用相邻的兄弟选择器来实现:

Anyways if the <hr> had the same parent, you could do this with adjacent sibling selector:

CSS

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

但是由于它有一个不同的父级，所以我不认为纯CSS可以做到这一点.

But since it has a different parent I don't believe this is possible with pure 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

Here is codepen example: http://codepen.io/StefanBobrowski/pen/qrGJga

这篇关于如何将样式应用于另一个元素中的同级元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！