CSS Hover: Bootstrap Modal

Question

Ich habe eine Schaltfläche und ein Modal, das auf Knopfdruck öffnet.

Wenn ich auf die Schaltfläche schweben, ändert sich die Hintergrundfarbe leicht. Wenn ich auf den Button klicke, öffnet sich ein Modal. Aber wenn ich den modalen und den Hover-Button schließe, bekomme ich keinen Hover-Effekt, den ich bekam, bevor ich auf den Button klickte.

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

, die aus diesem Grund ist:

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

Überschreibung es mit Ihrem eigenen CSS. Machen Sie die :hover! wichtig, so dass es sicherlich die :focus Regeln überschreiben;

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>

Answer 2

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

Answer 3

Es ist, weil, wenn Sie die modale schließen, wird der Fokus nach wie vor auf die Schaltfläche war und Sie haben individuelle Klasse, um den Fokus, die es legt zu schwarz. Das Entfernen dieser Klasse kann helfen.

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