2016-07-26 2 views
0

Мой менеджер попросил меня скопировать реализацию Bootstrap для уведомлений заголовков. Я скопировал html, и я сопоставил css. Один оставшийся кусок - это то, что я не уверен, откуда происходит эффект наведения для кнопки закрытия. Я проверил html и использовал инструменты Chrome dev. Любая идея, где эффект наведения для кнопки закрытия приближается и как я могу снизить эффект в моей локальной реализации?пытается отследить источник эффекта зависания бутстрапа

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

+1

Поиск '.close' внутри файла CSS: [расстояние/CSS/bootstrap.css] (https://github.com/twbs/bootstrap/blob/master/ dist/css/bootstrap.css), и вы увидите его по строке # 5851. – vanburen

+0

Вы имеете в виду маленький «X» справа? – Radmation

+0

Он находится в классе '.close', хотя в Chrome вы можете проверить фильтр: hov, и это приведет к переключению состояния зависания, чтобы вы могли видеть стили наведения. – Radmation

ответ

0

правила Hover для .close класса расположены на линии № 5851 от bootstrap.css файла:

оповещения Hover CSS См строку # 5851 из dist/css/bootstrap.css

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

Рабочий пример:Наведение/фокусировка Цвет и непрозрачность изменены.

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>

Смежные вопросы