Как сделать чтоб при наведение другие элементы не двигались?
div {
display: inline-block;
}
.th-panel-center {
color: #fff;
padding: 5px 10px;
/*background-color: rgba(17,17,17,0.8);*/
line-height: 50px;
height: 50px;
}
.th-panel-date {
display: inline-block;
background-color: rgba(17, 17, 17, 0.6);
}
.th-all-add-left {
display: inline-block;
background-color: rgba(17, 17, 17, 0.6);
width: 80px;
float: left;
text-align: center;
}
.th-panel:hover .th-all-add-left {
border: 3px solid rgba(45, 78, 135, 0.8);
border-radius: 3px;
}
<div class="th-panel">
<div class="th-panel-center">
<a class="uk-link-reset" href="#bets_one" uk-toggle>
<div class="th-all-add-left">
<div class="th-bs-one">
<span class="uk-text-capitalize uk-text-bold">657</span><span class="th-rub uk-text-bold"></span>
</div>
<div class="th-under-bs-procent">
65%
</div>
</div>
</a>
<div class="th-panel-date">
26.02.2018 09:30
</div>
</div>
</div>
box-sizing: border-box;
или изначально задать рамку, но прозрачную и т.д.