Остановить движение текста вниз при наведении курсора
У меня есть текст в середине блока div с размером шрифта 80 пикселей. Когда я наведен на блок div, он изменит размер границы с 1 пикселя на 5 пикселей с синим цветом, но текст будет перемещаться вниз.
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
.calendarday-number:hover {
margin: 12px 2px;
}
.calendarday-container:hover {
border: 5px solid #2e7ad1;
}
.add-day-ico {
display: none;
width: 21px;
height: 21px;
margin: 22px 0px;
float: right;
}
.calendarday-container:hover .add-day-ico {
display: block;
margin: 22px 0px;
}<div class = "calendarday-container" data-day = "0" data-dropable = "true">
<a href = "/autoresponder/create_day.php?day=0" data-action = "click" class = "calendarday-add">
<span class = "calendarday-number">0</span>
<img src = "http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle = "height: 21px; width: 21px;" align = "right" style = "margin-top: 3px;" class = "add-day-ico">
</a>
</div>Jsfiddle: http://jsfiddle.net/f0k6r9nb/
Я попытался изменить поле в calendarday-container:hover .add-day-ico, но это не помогло решить проблему.
Не могли бы вы показать мне пример, как я могу остановить перемещение текста вниз при наведении курсора?
Спасибо.
Ответы 5
Изменение ширины границы с 1 до 5 пикселей и пересчет внутренних частей не является практическим решением. Вы можете использовать дополнительный элемент с прозрачной рамкой 5 пикселей и изменить его на 5 пикселей цветной границы при наведении курсора.
Другое простое решение - использовать вместо него outline, поскольку он не увеличивает размеры элементов:
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-container:hover {
outline: 5px solid #2e7ad1;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
.add-day-ico {
opacity: 0;
width: 21px;
height: 21px;
position: absolute;
bottom: 0;
right: 0;
}
.calendarday-container:hover img {
opacity: 1;
}<div class = "calendarday-container" data-day = "0" data-dropable = "true">
<a href = "/autoresponder/create_day.php?day=0" data-action = "click" class = "calendarday-add">
<span class = "calendarday-number">0</span>
<img src = "http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" class = "add-day-ico">
</a>
</div>Большое спасибо за это, но мне нужно отображать изображение при наведении курсора. Не могли бы вы добавить изображение при наведении курсора? Спасибо!
Это не часть вопроса, но вот и все. Также имеет смысл позиционировать изображение значка абсолютно.
Типичный подход к отображению границы при наведении - это прозрачное состояние без наведения или цвет, соответствующий фону, а также ширина, соответствующая ширине границы при наведении.
В этом случае существует граница 1px. Здесь я бы изменил серую границу на синий, а затем использовал бы вставку box-shadow, чтобы добавить дополнительный 4px границы.
Примечание: Я также удалил некоторый запас для .calendarday-number при наведении, чтобы число не сдвигалось.
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
/*
.calendarday-number:hover {
margin: 12px 2px;
}
*/
.calendarday-container:hover {
border-color: #2e7ad1;
box-shadow: inset 0 0 0 4px #2e7ad1;
}
.add-day-ico {
display: none;
width: 21px;
height: 21px;
margin: 22px 0px;
float: right;
}
.calendarday-container:hover .add-day-ico {
display: block;
margin: 22px 0px;
}<div class = "calendarday-container" data-day = "0" data-dropable = "true">
<a href = "/autoresponder/create_day.php?day=0" data-action = "click" class = "calendarday-add">
<span class = "calendarday-number">0</span>
<img src = "http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle = "height: 21px; width: 21px;" align = "right" style = "margin-top: 3px;" class = "add-day-ico">
</a>
</div>Большое вам спасибо за это, потому что это то, чего я действительно хочу. Проблема решена! :)
Добавь это:
.calendarday-container {
border: 5px solid transparent;
outline: 1px solid #ccc;
outline: none;
}
.calendarday-container:hover {
outline: none;
}
Удали это:
.calendarday-number:hover {
margin: 12px 2px;
}
Текст перемещался вниз, потому что при наведении курсора произошло увеличение border-width с 1px до 5px.
Вы можете сохранить контур вокруг поля, используя свойство outline, и удерживая border: 5px solid transparent - border: 5px solid #2e7ad1 при наведении курсора.
Я создал для вас рабочую скрипку, для лучшего понимания: Ссылка на Jsfiddle
Вы можете использовать такой псевдоэлемент. Я также удалил много ненужных CSS, которые боролись друг с другом
* { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 5%; }
/* Normal */
.calendarday-container {
width: 150px; height: 150px;
position: relative;
display: flex; align-items: center; justify-content: center;
}
.calendarday-container:after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #ccc; z-index: -1;
}
.caldndarday-add { text-decoration: none; }
.calendarday-number { font-size: 80px; color: #ccc; }
.add-day-ico { width: 24px; height: 24px; position: absolute; bottom: -8px; right: -8px; }
/* Hover FX */
.calendarday-container:hover:after { border: 10px solid navy; }
.calendarday-container:hover .calendarday-number { color: navy; }<div class = "calendarday-container" data-day = "0" data-dropable = "true">
<a class = "caldndarday-add" href = "/autoresponder/create_day.php?day=0" data-action = "click">
<span class = "calendarday-number">0</span>
<img class = "add-day-ico" src = "http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png">
</a>
</div>
Граница в
.calendarday-container:hoverзаставляет его двигаться.