versucht, die Quelle eines Bootstrap-Hover-Effekts zu finden

Mein Manager hat mich gebeten, die Bootstrap-Implementierung für Header-Benachrichtigungen zu kopieren. Ich habe den HTML-Code abgeschrieben und den CSS-Code zugeordnet. Das einzige verbleibende Stück ist, dass ich nicht sicher bin, woher der Hover-Effekt für den Schließen-Button kommt. Ich habe den HTML-Code überprüft und Chrome-Dev-Tools verwendet. Irgendeine Idee, wo der Hover-Effekt für die Schließen-Schaltfläche kommt und wie ich den Effekt in meine lokale Implementierung bringen kann?versucht, die Quelle eines Bootstrap-Hover-Effekts zu finden

http://getbootstrap.com/javascript/#alerts

Quelle

2016-07-26 user6604655

Suche nach 'in der CSS-Datei .close': [dist/css/bootstrap.css] (https://github.com/twbs/bootstrap/blob/master/ dist/css/bootstrap.css) und Sie werden es in Zeile 5851 sehen. – vanburen

Meinst du das kleine "X" auf der rechten Seite? – Radmation

Es ist jedoch in der '.close' Klasse - in Chrome können Sie den Filter überprüfen: hov und dies wird den Hover-Status umschalten, so dass Sie die Hover-Stile in Wirkung sehen können. – Radmation

Hover Regeln für die .close Klasse sind auf Linie # 5851 der bootstrap.css Datei befindet:

Alert-Hover CSS Siehe Zeile # 5851 von dist/css/bootstrap.css

.close:hover, 
.close:focus { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
    filter: alpha(opacity=50); 
    opacity: .5; 
}

Arbeitsbeispiel:Hover/Focus Farbe und Deckkraft geändert.

button.close:hover, 
 
button.close:focus { 
 
    color: #f00; 
 
    opacity: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="alert alert-warning alert-dismissible" role="alert"> 
 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
    </button> 
 
    <strong>Warning!</strong> Better check yourself, you're not looking too good. 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Quelle

2016-07-26 15:54:21 vanburen

versucht, die Quelle eines Bootstrap-Hover-Effekts zu finden

Antwort

Verwandte Themen