CSS: cascading on: hover?

Question

Эй У меня есть некоторый стиль, но я не уверен, как это сделать, используя обычный CSS без js.

Мой HTML выглядит так:

 
    <div class="book"> 
     <span class="title">Snow Crash</span> 
     <span class="author">Neal Stephenson</span> 
    </div> 

И мой CSS, как это:

 
    div.book span.title { color: black; } 
    div.book span.author { color: gray; } 
    div.book:hover { color: orange; } 

Я хочу, чтобы оба автора и название, чтобы быть оранжевым всякий раз, когда ДИВ завис над, несмотря на то, Я установил их в разные цвета. Пролеты не будут наследовать свойство цвета из div, так как у них есть собственный набор цветов, и зависание пролетов не активируется, если вы не нависаете над пролетами. Могу ли я сделать это без использования javascript?

Answer 1

div.book span.title { color: black; } 
div.book span.author { color: gray; } 
div.book:hover, div.book:hover span.title, div.book:hover span.author 
{ 
    color: orange; 
} 

Answer 2

Правило div.book:hover не будет отменять div.book span.title и div.book span.author, поскольку последние правила более конкретно, чем прежние. Вам нужно будет сделать что-либо:

div.book span.title { color: black; } 
div.book span.author { color: gray; } 
div.book span.author:hover, div.book span.title:hover { color: orange; } 

или:

div.book span.title { color: black; } 
div.book span.author { color: gray; } 
div.book:hover { color: orange !important; } 

Я обычно рекомендую против использования !important, если это не абсолютно необходимо.

Кроме того, я бы сказал, что это CSS3 и реализован только в современных версиях браузера.

EDIT: Это третья альтернатива:

div.book:hover span.title, div.book:hover span.author { color: orange; }