Question

我的css中有一个共同的按钮设置。还有一个悬停设置。

.myBtn {
    background-color: #f60;
    border: none;
    font-size: 12px;
}
.myBtn:hover {
     background-color: #fff;
}

.myBtn主要位于黑色背景上，因此按钮在悬停状态下可见。但是当.myBtn在白色背景上时，按钮会消失，因为.myBtn悬停颜色和页面背景颜色相同。

我的问题是，是否可以使用.myBtn为所有按钮创建2个不同的悬停状态？

e.g：

.myBtn:hover1 {
     background-color: #fff;
}
.myBtn:hover2 {
     background-color: #000;
}

Answer 1

不，一个班级的两个徘徊不起作用。此外，当您相互声明两个时，样式表将被读取级联，因此只应用最后一个。

可能的解决方案是添加额外的课程。

.myBtn {
    background-color: #f60;
    border: none;
    font-size: 12px;
}
.myBtn:hover {
     background-color: #fff;
}
.myBtn.onWhite:hover {
     background-color: #000;
}

然后，您只需在明亮背景<button class="myBtn onWhite">上的按钮上添加额外的课程。

Answer 2

无法为同一个班级创建2个悬停效果。您可以使用不同的类并提供悬停，也可以使用jQuery来提供该效果。

Answer 3

你以什么方式改变背景颜色？通过硬编码您的背景颜色？或者它已经写在两个类中，当你触发某些东西时，html代码会改变类名，从而改变背景？如果是硬编码，我恐怕你也必须对Btn类进行硬编码。但是，如果它被某些东西触发，你可以拥有另一个Btn类名称，并将与背景颜色一起触发。

单个班级的两个悬停状态

3 个答案: