Я пытаюсь разместить несколько глификонов на веб-странице, которая в конечном итоге будет содержать ссылки при нажатии. Я хочу, чтобы они меняли цвет, когда курсор касается их, но не могу понять, почему в моей текущей попытке они все так сильно меняют размер. (Я не возражаю против того, чтобы они немного меняли размер). Пожалуйста, смотрите скрипку. http://www.bootply.com/Z8TAzgPwLb
Глификоны меняют размер
Ответы (1)
Добавляя padding, вы изменяете размер элемента в состоянии наведения. Исправьте смещение, установив его относительное положение:
#glyphicon:hover, .glyphicon:focus {
color: #FFFFFF;
background-color: #808080;
padding: 20px;
position:relative;
top:-20px;
}
Это должно вас заинтересовать. Вам все равно нужно будет исправить положение вашего элемента <h4> параллельно с вышеизложенным.
person
knittl
schedule
12.03.2015
Это по-прежнему будет толкать текст вниз. Если вы используете
position: relative;, все равно исходное пространство занято.
- person Pinki; 12.03.2015
@Pinki: да, см. мой последний абзац.
- person knittl; 12.03.2015
@knittl это все еще делает div вокруг него больше. Я не думаю, что это хороший подход, часть под ним должна быть перерисована браузером только для того, чтобы добавить отступ? Почему бы вам не добавить переход перед наведением, а затем изменить только цвет фона и цвет?
- person Pinki; 12.03.2015
@Pinki: вы всегда можете дать свой ответ, если у вас есть другое решение, которое, по вашему мнению, лучше решает проблему. Я предоставил свой, указал на его оговорку.
- person knittl; 13.03.2015
Я написал, каким будет мое решение... но вместо заполнения я написал прохождение...
- person Pinki; 13.03.2015
id="glyphicon"для каждого из них. это неверный html - person Pinki schedule 12.03.2015