如何在两个类中使用悬浮属性？

Question

我有两个css类

    .circle-btn{
    }
    .circle-btn-medium{
    }

但是这两个类都有自己的属性。但是在悬停属性上，我想对两者使用相同的背景色。

我发现的一个解决方案是如何使用悬浮属性，如下所示

.circle-btn:hover
{
    background-color:#39C11E;
}
.circle-btn-medium:hover
{
    background-color:#39C11E;
}

因此，与单独使用悬浮属性不同，是否可以同时使用不同类的属性，以便优化编码？

Answer 1

通过将2类加入到1中，可以将其最小化。

.circle-btn:hover , 
.circle-btn-medium:hover {
    background-color: #39c11E;
}

Answer 2

您可以在html中使用一个或两个类。因此，-medium将是修饰符，它只响应于大小。

例如：

css：

.circle-btn{
}
.circle-btn-medium{
}
.circle-btn:hover
{
     background-color:#39C11E;
}

html：

 <!-- common circle-btn -->
 <button class="circle-btn">circle button</button>

 <!-- medium circle-btn -->
 <button class="circle-btn circle-btn-medium">circle medium button</button>

顺便说一句，这是自助方式。例如，看看他们的按钮大小修饰符。