Question

我是CSS Bootstrap的新手。请帮我改变按钮“Go”的悬停颜色

<form class="navbar-form navbar-left" role="search">
        <div class="input-group">
            <span class="input-group-btn">
             <button type="submit" class="btn btn-info">Go</button>
            </span>
            <label for="search" class="sr-only">Search</label>
            <input type="text" id="search" class= "form-control" placeholder="Search" >
            <span class="glyphicon glyphicon-search form-control-feedback"></span>
        </div>
    </form>

Answer 1

请勿使用“！important”

阅读更多：https://j11y.io/css/dont-use-important/

注意：我添加了ID属性。

#col:hover {

   background-color: red;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="navbar-form navbar-left" role="search">
        <div class="input-group">
            <span class="input-group-btn">
             <button type="submit" id="col" class="btn btn-info">Go</button>
            </span>
            <label for="search" class="sr-only">Search</label>
            <input type="text" id="search" class= "form-control" placeholder="Search" >
            <span class="glyphicon glyphicon-search form-control-feedback"></span>
        </div>
</form>

Answer 2

试试这个

.btn-info:hover {
color: #fff;
background-color: #000;
border-color: #269abc;
}

它会在悬停时将您的颜色更改为黑色。如果它是重写那么使用！重要，如atul kishore的评论

中所述

如何更改Bootstrap 3中按钮的悬停颜色？

2 个答案: