georgej georgej - 1 month ago 8
CSS Question

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;
}
}

Answer

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

Comments