CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user7030651
user7030651

Reputation:

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>

Upvotes: 2

Views: 5253

Answers (3)

Rasika
Rasika

Reputation: 175

.btn-info.focus, body .btn-info:focus {
color: #fff;
background-color: #5bc0de;
}
.btn-info.focus:hover, body .btn-info:focus:hover {
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
 
<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>

Upvotes: 1

Ron.Basco
Ron.Basco

Reputation: 2446

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>

Upvotes: 2

Kishore Kumar
Kishore Kumar

Reputation: 12874

It's because, when you close the modal, the focus was still on the button and you have custom class for button focus which sets it to black. removing that class may help.

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

Upvotes: 0

Related Questions