html – 我如何使用:悬停多个类

前端之家收集整理的这篇文章主要介绍了html – 我如何使用:悬停多个类前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

HTML

CSS

.red {
    background: red;
}

.blue {
    background: blue;    
}

.button {
    border-radius: 6px;
}

.button:hover .red:hover {
    background: pink;
}
最佳答案
你所拥有的是试图匹配.red:悬停在内部.button:hover,这意味着你的标记中有一个嵌套元素.

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

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

Updated fiddle

原文链接:https://www.f2er.com/css/427524.html

猜你在找的CSS相关文章