Question

我使用Bootstrap 4在我的标题中创建了一些按钮，例如这个调用按钮：

<a role="button" class="btn btn-lg" style="font-size:2em;" href="tel:XXXX XXXX"><strong>Ph: XXXX XXXX</strong></a>

我已为btn-lg类添加了一些自定义着色：

.btn-lg {
background: #ffee38;
color: #000;
border:2px solid;}

这给了我想要的东西，除非鼠标悬停在按钮上，文字和边框呈浅蓝色。悬停时我更喜欢浅灰色。

如何进行此更改？蓝色悬停必须来自默认的引导类？

Answer 1

您只需要将伪类:hover添加到您的班级，并使用color属性在悬停时更改文字和边框颜色，如下所示：

.btn-lg:hover {
    color: lightgrey;
}

以下是按钮的实时版本：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<style>
.btn-lg {
    background: #ffee38;
    color: #000;
    border:2px solid;
}
.btn-lg:hover {
    color: lightgrey;
}
</style>

<a role="button" class="btn btn-lg" style="font-size:2em;" href="tel:XXXX XXXX"><strong>Ph: XXXX XXXX</strong></a>

如何更改Bootstrap lg按钮的悬停颜色

1 个答案: