CSS: Kaskadierung bei :hover?

Question

Hey ich habe einige Styling zu tun, aber ich bin nicht sicher, wie man es mit regelmäßigen css ohne js zu tun.

Meine Html-Datei sieht folgendermaßen aus:

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

Und mein css ist wie folgt:

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

Ich möchte, dass sowohl der Autor als auch der Titel orange angezeigt werden, wenn der Mauszeiger über das Div bewegt wird, auch wenn ich sie normalerweise auf unterschiedliche Farben eingestellt habe. Die Spans werden die Farbeigenschaft nicht vom Div erben, da sie ihre eigenen Farben eingestellt haben, und der Hover der Spans wird erst aktiviert, wenn man mit dem Hover über die Spans selbst fährt. Kann ich dies tun, ohne javascript zu verwenden?

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

Die Regel div.book:hover setzt nicht außer Kraft div.book span.title y div.book span.author weil die letztgenannten Regeln spezifischer sind als die erstgenannten. Sie müssen entweder tun:

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

oder:

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

Ich empfehle generell gegen die Verwendung von !important es sei denn, es ist absolut notwendig.

Außerdem möchte ich darauf hinweisen, dass es sich hierbei um CSS3 handelt und nur in modernen Browserversionen implementiert ist.

EDIT: Dies ist eine dritte Alternative:

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