CODEWITHSUNDEEP
csssass
georgej
georgej

Reputation: 3311

Add style to multiple element on hover - scss

I currently have this code which turns the footer titles and subtitle white when a footer cell is hovered over, and it works:

.footer-cell {
    position: relative;
    display: table;
    height: 160px;

    &:hover .footer-title {  // footer-title line
        color: white;
    }

    &:hover .footer-subtitle {  // footer-subtitle line
        color: white;
    }
}

Is there any way that I can combine the footer-title line and the footer-subtitle line so I dont have duplicate code? I tried this but it doesn't work:

.footer-cell {
    position: relative;
    display: table;
    height: 160px;

    &:hover .footer-title, .footer-subtitle {
        color: white;
    }
}

Upvotes: 0

Views: 37

Answers (1)

Jacob G
Jacob G

Reputation: 14162

Just wrap the selectors in the :hover class:

.footer-cell {
    position: relative;
    display: table;
    height: 160px;

    &:hover{ 
        .footer-title, .footer-subtitle {
           color: white;
        }
    }
}

Compiles to this

Upvotes: 2

Related Questions