Question

我有一个Bootstrap按钮，我在样式表中覆盖了样式，因为我想让按钮变暗，现在按钮有一个悬浮效果来自Bootstrap，我怎么能摆脱它？请参阅下面的代码段了解结果：

.btn-dark {
  min-width: 100px;
  background-color: black;
  color: white;
  border-radius: 1px;
  text-decoration: none;	
  opacity:1.0;
  box-shadow:none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<a href="#" class="btn btn-dark space hvr-pulse tog1" data-toggle="modal" data-target="#exampleModalCenter"><i class="fab fa-telegram-plane"></i> SEND US A MESSAGE</a>

Answer 1

尝试使用：hover选择器并添加更多CSS以指定设计的确切转换。

.btn-dark:hover {
  color: white;
}

Answer 2

<!DOCTYPE html>
<html lang="en">


<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .btn-dark{
    min-width: 100px;
    background-color: black;
    color: white;
    border-radius: 1px;
    text-decoration: none;  

}

.btn:hover {
color: #fff !important;
text-decoration: none;
}
    </style>

</head>

<body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <a href="#" class="btn btn-dark space hvr-pulse tog1" data-toggle="modal" data-target="#exampleModalCenter"><i class="fab fa-telegram-plane"></i> SEND US A MESSAGE</a>
</body>

</html>

小提琴：https://jsfiddle.net/1qmjw47o/

Answer 3

您还需要在样式中覆盖悬停。

.btn-dark: hover {
    //Your style
}

Answer 4

只需使用

    .btn:hover {
}

并写下必需品。

.btn-dark{
	min-width: 100px;
	background-color: black;
	color: white;
	border-radius: 1px;
	text-decoration: none;	
	opacity:1.0;
	box-shadow:none;
}
.btn-dark:hover {
color: #fff !important;
text-decoration: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<a href="#" class="btn btn-dark space hvr-pulse tog1" data-toggle="modal" data-target="#exampleModalCenter"><i class="fab fa-telegram-plane"></i> SEND US A MESSAGE</a>

Answer 5

我这样做的方法是禁用悬停，找到您的按钮，然后将悬停颜色与按钮颜色相同。

.e-btn.e-flat, .e-css.e-btn.e-flat {
        background-color: #EB780A;
        border-color: #EB780A;
    }

并禁用悬停颜色-在末尾添加悬停。

.e-btn.e-flat:hover, .e-css.e-btn.e-flat:hover {
        
        background-color: #EB780A;
        border-color: #EB780A;
    }

如何从Bootstrap按钮中删除悬停效果？

5 个答案: