多个选择器是否适用于：悬停？

Question

我想在左右箭头悬停更改样式后如何才能这样做？

.header-slider .content:hover .left-arrow, .right-arrow
{
    opacity: 1;
}

Answer 1

您可以使用以下内容，但实际上，只需写出长选择器就可以了。

.header-slider .content:hover [class$="-arrow"]

如果你想减少使用Sass或类似的东西。

Answer 2

你需要一个更好的选择器：

.header-slider .content:hover .left-arrow, .header-slider .content:hover .right-arrow {
    opacity: 1;
}

如果您不喜欢这种方式，可以为箭头添加一个公共类，比如说.arrow，然后执行以下操作：

.header-slider .content:hover .arrow {
    opacity: 1;
}

当然，这需要一些HTML更改，而不是纯粹在CSS中完成。

Answer 3

我认为你想要的是

.header-slider .content:hover .left-arrow, .header-slider .content:hover .right-arrow {
    opacity: 1;
}

您的原始代码相当于

.header-slider .content:hover .left-arrow {
    opacity: 1;
}

.right-arrow {
     opacity: 1;
}

我不认为你想要的是什么。

如果你发现这个过于冗长，请查看css预处理器sass，它允许你写：

.header-slider .content:hover {
    .left-arrow, .right-arrow {
        opacity: 1;
    }
}