Свойство CSS border можно применить к любому HTML элементу, например, пункту меню li, на который навели курсор мышки.
- 111
- 222222
- 333333333
- 444444444444
<style> .skachet li { display: inline; background: #ccc; padding: .5em 10%; line-height: 2.6em; } .skachet li:hover { border-bottom: .5em solid blue; } </style> <ul class="skachet"> <li>1 <li>2 <li>3 <li>4 </ul>Ничего не прыгает и не скачет, потому что, в отличии от inline-block и block, border не меняет высоту элемента при inline, только его ширину. А в примере указана рамка только для нижней стороны.
Распространим рамку для всех сторон.
- 111
- 222222
- 333333333
- 444444444444
<style> .skachet li { display: inline; background: #ccc; padding: .5em 10%; line-height: 2.6em; } .skachet li:hover { border: .5em solid blue; } </style>Видите как при наведении на список, он увеличивается в ширину, занимая больше места справа?
Для того, чтобы убрать все эти "полёты", зададим прозрачный или того же цвета, что и фон, border для обычного состояния. То есть зарезервируем необходимое пространство (актуально не только для меню).
- 111
- 222222
- 333333333
- 444444444444
<style> .skachet li { display: inline; background: #ccc; padding: .5em 10%; border-left: .5em solid #ccc; border-right: .5em solid #ccc; line-height: 2.6em; } .skachet li:hover { border: .5em solid blue; } </style>
А что, если пункты имеют ширину в % (посмотреть практический образец). Как зарезервировать в этом случае border, дабы избежать смещения и съезжания? "Поколдовать" с CSS background?
- 111
- 222222
- 333333333
- 444444444444
<style> .skachet li { display: inline-block; width: 25%; padding: .8em 0; text-align: center; background: #ccc; background-image: linear-gradient(to top, #fff .5em, transparent .5em), linear-gradient(to bottom, #fff .5em, transparent .5em); } .skachet li:hover { background-image: linear-gradient(to left, blue .5em, transparent .5em), linear-gradient(to right, blue .5em, transparent .5em), linear-gradient(to top, blue .5em, transparent .5em), linear-gradient(to bottom, blue .5em, transparent .5em); } </style>
Или box-sizing?
- 111
- 222222
- 333333333
- 444444444444
<style> .skachet li { display: inline-block; width: 25%; padding: .3em 0; border-top: .5em solid #fff; border-bottom: .5em solid #fff; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #ccc; } .skachet li:hover { border: .5em solid blue; } </style>
Альтернативные варианты, когда рамка отображается поверх соседних элементов, позволяющие избавиться от дёрганья и дрыганья: outline (не может закругляться) или box-shadow.
- 111
- 222222
- 333333333
- 444444444444
<style> .skachet li { display: inline; background: #ccc; padding: .5em 10%; line-height: 2.6em; } .skachet li:hover { outline: .5em solid blue; /* или box-shadow: 0 0 0 .5em blue; position: relative; */ } </style>
10 комментариев:
*{
border: 1em solid transparent;
}
*:hover{
border: 1em solid blue;
}
?
А то с background-image много текста, и зачем такое свойство на рамку тратить, когда его можно для другого дела вполне более удачно применить.