Jquery 嵌套相同的元素。当：悬停子对象时，禁用：悬停父CSS

有没有办法通过css控制：仅在子对象或其父对象上的悬停效果？ 另外，元素是相等的

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

这是密码

HTML

在本例中，当我将鼠标悬停在.nested red元素上时，我希望取消content.left的导航。

已解决

更新小提琴这里

---

为此，您需要重新组织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>

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

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