CODEWITHSUNDEEP
csscss-selectors
chuckd
chuckd

Reputation: 14610

Trying to nest css selectors on a hover

I would like to run this when a hover occurs - change the background-color of a inner class to grey, can this be done with css?

.thumbnail:hover {
  border: 2px solid rgba(156, 162, 153, 1);
  .labels .inner {
    background-color: rgba(156, 162, 153, 1);
  }
}

Upvotes: 0

Views: 139

Answers (1)

Vucko
Vucko

Reputation: 20844

Sure it can:

.thumbnail:hover {
    border: 2px solid rgba(156, 162, 153, 1);
}

.thumbnail:hover .labels .inner{
    background-color: rgba(156, 162, 153, 1);
}

Even your styles will work if you use SASS/LESS, which will precompile that styles into this ones.

Also, as @Paulie_D said, this depends of your markup. This will work on the following scenario (one of the):

<div class="thumbnail">
    <div class="labels">
        <div class="inner">Foobar</div>
    </div>
</div>

Working fiddle

Upvotes: 1

Related Questions