忽略父母与孩子鼠标悬停事件在同一类的CSS

我要代表嵌套组（http://en.wikipedia.org/wiki/File:NestedSetModel.svg）忽略父母与孩子鼠标悬停事件在同一类的CSS

具有下面的HTML结构

<div class="circle"> 
    <div class="nodeText">Clothing</div> 
    <span class="lft">1</span> 
    <span class="rgt">22</span> 
    <div class="circle" id="node2"> 
    <div class="nodeText">Men's</div> 
    <span class="lft">2</span> 
    <span class="rgt">9</span> 
    </div> 
    <div class="circle" id="node3" > 
     <div class="nodeText" >Women's</div> 
    <span class="lft">10</span> 
    <span class="rgt">21</span> 
    </div> 
</div>

和CSS（至少我认为是这个问题很重要）

.circle { 
background-color: blue; 
    margin:10px; 
    padding: 10px; 
    border-radius: 10%; 
    position: relative; 
    text-align: center; 
    float: left; 
    z-index: inherit; 
} 

.circle:HOVER{ 
background-color: red; 
}

我想要的行为，是当我鼠标带班“圆”一个div （在这个例子中“男士”或 “女子”），我改变了这些背景颜色，但不是父DIV '服装'

来源

2013-01-08 Toki

我改变

.circlr:hover

到

.circlr .circle:hover

这是例子： http://jsfiddle.net/sechou/9eNuN/

来源

2013-01-08 05:41:03

感谢您的答复世恩周，感谢您的答复，但只能在两个层面上，如果我需要这恰好更多级别的儿童 – Toki

它适用于多层次。你能举出更多层次的例子吗 –

下面是一个例子 http://jsfiddle.net/9eNuN/1/ – Toki

请参阅此链接FIDDLE

我有一个扩展内部类与.circle

父类的名字将是class="circle"而对于男性或女性内部类的名字将出现class="circle color"

通过代码去正确地理解它。

也许类选择器最强大的方面是可以将多个类应用于一个HTML元素。例如，您可能希望一个特定的元素上使用两个规则是这样的：

<p class="big indent"> 

.big { font-weight: bold; } 
.indent { padding-left: 2em;}

来源

2013-01-08 07:34:26

忽略父母与孩子鼠标悬停事件在同一类的CSS

回答

相关问题