Rishi Rishi - 11 days ago 8
CSS Question

CSS Hover: Bootstrap Modal

I have a button and a modal which is opening on button click.

When I hover on button then its background color is slightly changed. When I click on button then a modal is opening. But when I close the modal and hover on button then I don't get hover effect which I was getting before clicking on button.



.btn-info.focus, .btn-info:focus {
color: #fff;
background-color: #000 !important;
border-color: #fff !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info height_30 pull-right margin_right_10 mail_download_csv_btn" data-toggle="modal" data-target="#mail_pdf">Mail PDF</button>

<div class="modal fade" id="mail_pdf" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>




Answer

that is because of this:

.btn-info.focus, .btn-info:focus {
    color: #fff;
    background-color: #31b0d5;
    border-color: #1b6d85;
}

override it with your custom css. make the :hover !important so it surely override the :focus rules;

body .btn-info.focus, body .btn-info:focus {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
  }
  .btn-info:hover {
color: #fff;
background-color: #31b0d5 !important;
border-color: #269abc !important;
 }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info height_30 pull-right margin_right_10 mail_download_csv_btn" data-toggle="modal" data-target="#mail_pdf">Mail PDF</button>

<div class="modal fade" id="mail_pdf" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>