CODEWITHSUNDEEP
sass
simplesample
simplesample

Reputation: 95

How to use :hover affects to child element?

I have this html structure:

.Gallery > .Gallery__container > .Gallery__container-item > .Gallery__container-item-image

I want to :hover on .Gallery__container-item affects to .Gallery__container-item-image

  &-item{
      background-color: $darkgray;
      padding: 20px;
      border-radius: 20px;
      cursor: pointer;
      &:hover{
        &-image{ //doesn't recognized
          transition: scale 1s linear;
          transform: scale(1.1);
        }
      }
    }

Using SCSS

Upvotes: 0

Views: 218

Answers (1)

Amaury Hanser
Amaury Hanser

Reputation: 3456

The ampersand & in your code will not compile to what you want.
Here is a simplified example (with less markup and less styling):

.Gallery {
    &-item {
        &:hover {
            &-image {
                transition: scale 1s linear;
            }
        }
    }
}

will compile to:

.Gallery-item:hover-image {
  transition: scale 1s linear;
}

Now, you have few possibilities, first one would be to write the full class name:

.Gallery {
    &-item {
        &:hover {
            .Gallery-item-image {
                transition: scale 1s linear;
            }
        }
    }
}

You could also define a variable that will take the value of the selector before the :hover, that's probably what you want to do:

.Gallery {
    &-item {
        $selector : &;
        &:hover {
            #{$selector}-image {
                transition: scale 1s linear;
            }
        }
    }
}

Upvotes: 1

Related Questions