Рамка при использовании :hover

Дата добавления: 2015-07-09; просмотров: 789; Нарушение авторских прав

При добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover. Есть два способа, как это «победить». Самое простое — заменить border на outline, которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).

Пример 2. Рамка при наведении

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>outline</title>

<style>

div {

width: 100px; height: 100px; /* Размеры */

background: #fc0; /* Цвет фона */

border: 3px solid #fff; /* Белая рамка */

border-radius: 10px; /* Радиус скругления */

display: inline-block;

}

div:hover {

outline: 2px solid #000; /* Чёрная рамка */

}

</style>

</head>

<body>

<div></div>

</body>

</html>

outline не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод — добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width, border слева и border справа. Аналогично обстоит и с высотой.

Пример 3. Рамка при наведении