Kozack
@Kozack
Thinking about a11y

Как сделать бордер поверх соседних элементов?

Задача стоит следующая: есть цветной блок. При наведении на него его border расширяется и должен идти поверх соседних элементов. Моя реализация. Суть в том, что при наведении ширина border'а увеличивается и margin пропорционально уменьшается.
.col-bor {
	background-clip: content-box;
	-moz-background-clip: content;
	-webkit-background-clip: content;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	border-width: 0px;
	border-style: solid;
	transition-property: border-width, margin;
	transition-duration: .3s;
	-webkit-transition-property: border-width, margin;
	-webkit-transition-duration: .3s;
}
.col-bor:hover {
	border-width: 10px;
	margin: -10px;
	z-index: 5;
}

Но в ней есть изъян - при наведении весь блок и контент в нём дрожит.

Какой альтернативный подход можно использовать, чтобы избавится от дрожи контейнера?
Пробовал так же сделать эту же анимацию на js - результат оказался ещё хуже.
  • Вопрос задан
  • 3941 просмотр
Решения вопроса 1
RadiationX
@RadiationX
Front-End разработчик
Вместо border пропишите outline

Уверен на 99% что это вам поможет.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
@Kuzzy
Даже скорее вот так jsfiddle.net/LLx3B/2
Ответ написан
Комментировать
@Kuzzy
Вот так можно: jsfiddle.net/LLx3B
Ответ написан
Комментировать
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
jsfiddle.net/iiil/x3Am6
вот такая идея. А в Вашем примере однозначно будет дергаться. Даже не пытайтесь его изменить.
Ответ написан
Комментировать
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
В предыдущем ответе из-за margin артиклей не заметил, что рамка не перекрывает соседние элементы.
Вот так надо jsfiddle.net/iiil/x3Am6/1
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы