html - 如何使用 :hover 与多个类

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您所拥有的是试图匹配inside .button:hover，这意味着您的标记中有一个嵌套元素。

由于您选择的是相同的元素，因此您需要将两个类与单个:hover:

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

更新的小提琴

Answer 2

您可以将 CSS 规则应用于多个选择器（类如 «.button»，或状态如 «:hover»），方法是用逗号分隔它们。

因此只需添加一个逗号：

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

Answer 3

使用以下代码JSFIDDLE

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

Answer 4

要应用多个类，不要添加空格（只需使用另一个句点）：

CSS

p.button {
    border-radius: 6px;
}

p.red {
    background: 6px;
}

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

HTML

<p class="button red">Hover Here</p>

空格用于表示子元素。iepbutton red:hover 会影响所有在悬停时具有红色类的元素，这些元素完全包含在具有类按钮的父段落中。