jquery - 嵌套的 SAME 元素。当 :hover child, 禁用时:悬停父 CSS

Question

有什么方法可以通过 css 控制 :hover 效果只对 child 或其 parent 产生影响吗？附言元素相等

我构建了一个上下文菜单，但在某些情况下可能存在嵌套元素。

这是代码

http://jsfiddle.net/bkoqv52e/3/

HTML

<div class="container row">
    <div class="col-md-6 content-section left"><!--parent-->
        <nav>nav</nav>
        <div class="content">content left
            <div class="content-section nested"><!--child-->
                <nav>nav</nav>
                <div class="content">content nested</div>
            </div>
        </div>
    </div>
    <div class="col-md-6 content-section right">
        <nav>nav</nav>
        <div class="content">content-right</div>
    </div>
</div>

CSS

.container {
    width:100%;
    background:#eee;
    padding:30px;
  position: relative;
}
nav {
    height:30px;
    background:#999;
    display:none;
    width:100%;
    position:absolute;
    left:0;
    margin-top:-30px;
}
.left {
    background:#ddd;
    height:300px;
    position: static;
}
.right {
    background:#ccc;
    height:200px;
    margin-top:100px;
    position: static;
}
.nested {
    width:150px;
    margin-top:100px;
    height:100px;
    background: #ff0000;
}
.content-section:hover > nav {
    display:block;
}

在这个例子中，当我将鼠标悬停在“.nested”(红色)元素上时，我想消失内容“.left”的导航。

Answer 1

解决了!

在这里更新 fiddle

http://jsfiddle.net/bkoqv52e/5/

$(".content-section").hover(
  function(){ // Mouse Over
   $(this).parents(".content-section").addClass("hide-menu");
  },
  function(){ // Mouse Out
    $(this).parents().removeClass("hide-menu");
  }
);