css - 悬停时向多个元素添加样式 - scss

Question

我目前有这段代码，当将鼠标悬停在页脚单元格上时，它会将页脚标题和副标题变为白色，并且有效:

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

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

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

有什么方法可以组合页脚标题行和页脚副标题行，这样我就没有重复的代码了吗？我试过这个但它不起作用:

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

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

Answer 1

只需将选择器包装在 :hover 类中:

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

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

Compiles to this