Эффект наведения глифика смещен - Bootstrap 3

У меня проблема :hover на glyphicon в span.

Я не уверен, что glyphicon не заполняет весь span, или если есть какие-то скрытые paddings/margins я не вижу. Я попытался вручную установить все виды странных стилей, чтобы получить красивую границу свечения вокруг моего glyphicon но ничего не работает.

Изображение (зависающее над золотым цветом на этом изображении)

пример

Демо-версия JSFiddle

CSS

.glyphicon-stop:hover {
 -webkit-box-shadow: 0 0 10px yellow;
}

Посмотреть

<div>
<p id="hoverColor">Color Code</p>
</div>

<div id="colorCode">
 
 
 
 
 
</div>

JQuery

$('[id^=_]').hover(function () {
 //alert($(this).attr('id'));
 document.getElementById("hoverColor").innerHTML = $(this).attr('id').replace('_', '');
}, function () {
 document.getElementById("hoverColor").innerHTML = "Color Code";
}
);

Любая помощь в получении границы вокруг JUST glyphicon а не смещение, будет оценена!

1 ответ

Это не решение, а больше объяснение того, что происходит. Поведение вызвано тем, что бутстрап-глификон не заполняет всю область. У них есть все, что было встроено в "margin" или "padding". В вашем случае вы используете следующий символ:

.glyphicon-stop:before {
 content: "\e074";
}

все глифы здесь → http://www.bootply.com/61521

здесь показана демонстрация того, насколько "маржа" или "заполнение" \e074 "stop stop" \e074 содержит:

ваша скрипка разветвлена → http://jsfiddle.net/Ay9Mj/

Это соответствует неожиданному удивлению вашему плохому опыту в этом вопросе. Таким образом, ошибка - это сами глифы, а не некоторые плохие CSS или ошибки в разметке. Я предлагаю вам уйти от глифа "видео-стоп" и использовать значок квадратного квадрата или просто прямоугольник . Зачем использовать эти глифы, когда вы просто хотите показать квадрат?

licensed under cc by-sa 3.0 with attribution.