Question

有什么办法可以通过css控制：只对孩子或其父母的悬停效果？附：元素相等

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

这是代码

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

在这个例子中，我想消失内容的导航＆＃34; .left＆＃34;当我徘徊在＆＃34; .nested＆＃34; （红色）元素。

Answer 1

解决！

在此更新小提琴

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");
  }
);

嵌套的SAME元素。 when：悬停子，禁用：悬停父CSS

1 个答案: