CSS：カスケード表示：ホバー？

Question

ちょっとしたスタイリングがありますが、jsなしで普通のCSSを使ってやる方法がわかりません。

私のHTMLは、このようなものです：私がdiv要素があっても、ホバーされるたびに、著者とタイトルの両方がオレンジ色になりたい

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

：

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

そして、私のCSSは、このようなものです私はそれらを通常は異なる色に設定しました。スパンは、自分の色が設定されているのでdivのcolorプロパティを継承しません。スパンの上にマウスを置かないと、スパンのホバーはアクティブになりません。 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： これは第3の選択肢である：

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