Question

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

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

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

您所拥有的是尝试匹配 {/ 1>}内的 .red:hover，这意味着您的标记中存在嵌套元素。

由于您选择了相同的元素，因此您需要将这两个类与一个.button:hover组合在一起：

:hover

Updated fiddle

Answer 2

使用以下代码JSFIDDLE

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

Answer 3

您可以通过用逗号分隔它们来将CSS规则应用于多个选择器（类如«.button»，或类似«：hover»之类的状态）。

因此只需添加一个逗号：

.button:hover, .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>

该空格用于表示子元素。即p.button red：hover会影响悬停时类为红色的所有元素，这些元素完全包含在带有类按钮的父段落中。

我如何使用：悬停多个类

4 个答案: