我如何使用:悬停多个类

Question

我有一个css按钮样式和一些预定义的颜色样式.我使用颜色类为相同颜色的颜色和按钮样式着色以使按钮变圆.

如何在按钮上添加悬停样式以将颜色更改为较浅的阴影？我认为它会像.class class2:hover {etc}一样简单,但由于某种原因它不起作用.

这是我准备演示的小提琴:http: //jsfiddle.net/7n4Wy/

HTML

<p class="red button">Test</p>
<p class="blue button">Test</p>
<p class="red"> Not a button </p>

CSS

.red {
    background: red;
}

.blue {
    background: blue;    
}

.button {
    border-radius: 6px;
}

.button:hover .red:hover {
    background: pink;
}

Answer 1

你已经尝试匹配.red:hover是内部 .button:hover的,这意味着在你的标记嵌套元素.

由于您选择了相同的元素,因此需要将两个类合并为一个:hover:

.red.button:hover {
    background: pink;
}

更新了小提琴

Answer 2

你可以将一个 CSS 规则应用到多个选择器（像 «.button» 这样的类，或者像 «:hover» 这样的状态），用逗号分隔它们。

因此只需添加一个逗号：

.button:hover, .red:hover {
    background: pink;
}