Question

Hey I have some styling to do but I’m not sure how to do it using regular css without js.

My html is like this:

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

And my css is like this:

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

I want both the author and title to be orange whenever the div is hovered over, even though I have set them to be different colors normally. The spans won’t inherit the color property from the div since they have their own colors set, and the hover of the spans won’t activate unless you hover over the spans themselves. Can I do this without using 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; 
}