Есть несколько блоков div
, идущие подряд сверху вниз. Каждый содержит некоторый текст. При событии hover
на div
текст увеличивается с 11 px
до 13 px
, при этом высота div
немного увеличивается, из-за чего все нижестоящие div
съезжают вниз, но это некрасиво, так как получается, что вся страница прыгает.
Как можно сделать, чтобы нижестоящие блоки не съезжали вниз? Задать фиксированную высоту div
я не могу, т.к. все div
разной высоты. Может быть можно как-то задать блоку div
заранее высоту, которую он принимает при увеличении текста внутри div
?
-
1может такой вариант подойдет - jsfiddle.net/soledar10/1wbr4e3x– soledar107 сен 2016 в 9:30
2 ответа
Если дублирование контента допустимо, то можно воспользоваться таким трюком:
- создать блок, который будет служить контейнером
- внутри контейнера разместить прозрачный блок с целевым размером шрифта, он будет служить распоркой
- внутри контейнера разместить видимый блок с абсолютным позиционированием и размерами, равными размеру контейнера, над которым будут проводится преобразования
Этот трюк позволит оперировать любыми размерами строки.
Ниже раскадровка для пояснения:
- только блок распорка
- целевой блок поверх распорки
- только целевой блок
* {
box-sizing: border-box;
}
.hover-me {
border: 1px solid #000;
font-size: 14px;
padding: 10px;
position: relative;
}
.hover-me .visible {
font-size: 11px;
}
.hover-me .visible:hover {
font-size: 14px;
}
.hidden {
opacity: 0;
pointer-events: none;
}
.visible {
position: absolute;
padding: 10px;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.demo-1 .hidden,
.demo-2 .hidden {
opacity: .25;
}
<div class="hover-me demo-1">
<div class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt alias, natus perspiciatis ipsum aspernatur quae dignissimos atque dolorum blanditiis asperiores!</div>
</div>
<div class="hover-me demo-2">
<div class="visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quidem laborum et nam sit eaque, magni reiciendis libero quia, corporis.</div>
<div class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quidem laborum et nam sit eaque, magni reiciendis libero quia, corporis.</div>
</div>
<div class="hover-me demo-3">
<div class="visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae eveniet neque soluta ducimus veniam harum aliquam tempora doloribus. Consequuntur, atque.</div>
<div class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae eveniet neque soluta ducimus veniam harum aliquam tempora doloribus. Consequuntur, atque.</div>
</div>
Я не знаю на сколько это вообще легально, но попробуйте использовать line-height со значением шрифта при увеличении. Например так: https://jsfiddle.net/7xLf31mo/
<div>
<span>Текст</span>
</div>
<div>
<span>Текст<br>текст</span>
</div>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
div{
widhth: 100%;
padding: 10px;
color: #fff;
text-align: center;
background-color: red;
margin-bottom: 10px;
transition: all 0.2s linear;
font-size: 11px;
line-height: 13px;
}