Используйте селектор: hover, чтобы изменить правила элементов глубоких детей с чистым CSS

Question

Посмотрите на эту структуру элементов.

[#parent] 
    [#childA] 
    [#childChildA] 
    [#childChildB] 
     [#childChildChildA] 
    [#childB] 
[/#parent] 

Я хочу изменить #childChildChildA к opacity: 0; с помощью селектора #childA: hover. Я пробовал:

#childA:hover > #childChildB > #childChildChildA { 
    opacity: 0 !important; 
} 

Но это ничего не принесло. Как я могу изменить глубокий дочерний элемент при использовании гораздо более высокого родительского элемента с чистым CSS?

Answer 1

вам нужно удалить> 's

<div id='a'> 
    <div id='b'></div> 
    <div id='c'> 
     <div id='d'></div> 
    </div> 
</div> 


#a:hover #C#d { 
    opacity: 0 !important; 
} 

http://jsfiddle.net/qDRwa/

Это пример его с разными названиями идентификаторов.

Answer 2

Я хотел бы предложить следующее, хотя и (очевидно) непроверенных (учитывая отсутствие HTML, с которыми работать):

#childA:hover #childChildChildA { 
    opacity: 0; 
}