請在懸停

Question

我正在做一個評論框，允許嵌套評論和基本結構類似這樣的風格不是父元素：

<article class="comment"> 
    Level 1 comment 
    <article class="comment"> 
    Level 2 comment 
    </article> 
    <article class="comment"> 
    Level 2 comment 
    <article class="comment"> 
     Level 3 comment 
    </article> 
    </article> 
</article> 

我用.comment:hover加亮顯示當前懸停的元素的背景;但是，這也會導致所有父元素都被突出顯示。這是我想要避免的。

同時，我想保留嵌套結構，以便每個評論的精彩集錦也包含了懷疑評論的孩子。

Answer 1

看一看

<article class="comment"> 
    <span>Level 1 comment</span> 
    <article class="comment"> 
     <span>Level 2 comment</span> 
    </article> 
    <article class="comment"> 
    <span>Level 2 comment</span> 
    <article class="comment"> 
     <span>Level 3 comment</span> 
    </article> 
    </article> 
</article>​ 

CSS

article > span:hover 
{ 
    background-color: red; 
}​ 

基本上你只需要將它們包裝成的東西，才能成爲奇異

http://jsfiddle.net/bYmjf/1 < - 工作實例

Answer 2

你可能想用十字架做實驗 - 指針事件的替代如here所述;但是我仍然會改變應用到元素的類的結構，而不是爲了更易於維護。