Question

我有两个css类

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

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

我找到的一个解决方案是如何单独使用悬停属性如下

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

因此，不是单独使用悬停属性，而是可以同时将此属性与不同的类一起使用，以便我可以优化我的编码？

Answer 1

您可以通过将2类加入到一个来最小化它。

.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>

顺便说一下，这是引导方式。例如，只看他们的buttons sizes modifiers。

我如何使用两个类的悬停属性

2 个答案: