忽略父母與孩子鼠標懸停事件在同一類的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

回答

相關問題