hover меню при смене шрифта дергается
Совет: Как исправить проблему с font-weight в состоянии hover
Дата публикации: 2016-03-18
От автора: вы когда-нибудь пробовали изменить значение font-weight у ссылки в разных состояниях? Если да, то вы должны были заметить, что текст немного сдвигается. В этой статье мы сначала узнаем, что вызывает этот сдвиг, а затем рассмотрим два возможных решения данной проблемы.
Определяем проблему
Сначала давайте определим проблему на простом примере. Рассмотрим рисунок ниже:
Пункты меню – ссылки, т.е. в CSS будет что-то типа:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Зачастую пунктам меню не задается фиксированная ширина, а это значит, что при наведении курсора мыши, текст немного сдвинется. Это происходит из-за того, что ширина ссылки при наведении на нее увеличивается. Чтобы продемонстрировать это, добавим класс active к первой ссылке со следующими стилями:
Мы также изменили текст второго пункта на первый, чтобы они были равны:
Теперь если открыть панель разработчика в браузере и навести курсор на первые две ссылки, можно заметить, что они не равны. Все сказанное выше можно наглядно посмотреть в демо:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Надо сказать, что делать элемент жирным при наведении мыши не принято, но иногда может пригодиться.
Решение №1: задать всем пунктам ширину
Как говорилось выше, самый очевидный способ это задать всем пунктам меню ширину. В нашем примере мы задали ширину всех пунктов меню в 24%. Результат:
Этот способ работает, но он может не подойти нам. Есть случаи, когда нам нельзя добавлять фиксированную ширину элементов. Ну и на основе вышесказанного рассмотрим решение получше.
Решение №2: Text Shadow
Используя text-shadow, можно сымитировать эффект font-weight. Сделать это можно, правильно подобрав значение blur-radius.
В зависимости от используемых шрифтов в проекте можно скомбинировать свойства text-shadow и letter-spacing и создать красивые эффекты для текста. Чтобы продемонстрировать данный эффект, мы добавили пару строк CSS кода к нашим ссылкам:
Изменить начертание шрифта при наведении без сдвига соседних элементов
Часто в дизайне активный элемент навигации (или при наведении) выделяют другим начертанием шрифта, например bold. В таком случае, при смене начертания, элемент становится шире и занимает больше пространства, чем раньше, при этом соседние элементы сдвигаются на некоторое расстояние, что является некорректным поведением
В данной статье покажу приём, который позволит исправить такое поведение
Пример некорректного поведения
Посмотрим пример, в котором попытаемся изменить начертание шрифта на bold при наведении
В результате у нас получается следующее:
При наведении соседние элементы смещаются
Посмотрим ниже, как это исправить
Исправляем некорректное поведение
Для исправления данной проблемы, мы будем использовать data атрибуты для ссылок и псевдоэлемент :after со свойством content: attr();
Для каждой ссылки добавим data атрибут data-title с соответствующим ссылке значением
Чтобы псевдоэлемент со значением data атрибута располагался точно над элементом ссылки, используем абсолютное позиционирование и display: flex; с соответствующими свойствами для центрирования
Посмотрим на текущий результат:
Теперь при наведении на элемент, соседние элементы не сдвигаются
С помощью данного приёма можно также добиваться различных интересных визуальных эффектов при наведении
Итоги
Надеюсь, эта небольшая статья сэкономит вам некоторое время, если вы столкнётесь с такой ситуацией
Буду рад, если статья оказалась полезной
Спасибо за ваше внимание и уделённое время!
Почему дергаются элементы при наведении на меню и не работает hover эффект на подменю?
Когда навожу на элементы menu, то они дергаются и еще делает это резко, хотя я задал transition, а на подменю hover эффект вообще почему не работает, но думаю если заработает, то тоже будет дергаться в ширину.
Демо tempesv0.beget.tech
Код [del]
Эффект при наведении. При наведении на впереди стоящий элемент, предыдущие элементы меняли цвет border
Необходимо реализовать это по возможности без js. Если есть какие-то варианты на css, буду рад.
Эффект при наведении на пункт меню
Здравствуйте. Есть меню следующего вида (на рисунке). Никак не могу придумать, какой эффект при.
Сдвигаются элементы при наведении :hover
Есть следующий код
| Комментарий модератора | ||
| ||
При наведении все элементы hover
Здравствуйте! Возникла проблема, необходимо, чтобы во всем div’e все элементы переходили в.
Эффект всплывающего пузыря при наведении на ссылку меню
Вопрос знатокам! На фото видно, что пузырь находится напротив ссылки HOME. Я полагаю, что пузырь.
Не работает :hover (Не подсвечивается текст при наведении)
День добрый Такая проблемка, при наведении мышкой не подсвечивается текст желтым цветом. Прошу.
Не работает псевдокласс :hover при наведении мышкой
Хочу чтобы image менял фон на черный при наведении мышью, но не получается. Может у меня плагины в.
Дергаются границы текстбокса при наведении на границу
Всем привет, проблема с текстбоксом, такая борода получается только если поставить вертикальный.
При наведении шрифт становится жирным, но при этом ширина «плавает». Как победить?
Как сделать шрифт текста «жирным»?
Здравствуйте. имеется код для перевода текста в жирный «режим )». как его изменить так чтобы он не.
Как в субформе обновить источник не вызывая при этом событие «Текущая запись» (Current»)?
Здравствуйте! В моей БД в событии Current основной субформы прописаны команды для обновления.
Если при ответе «нет» в поле следующее становится недоступным. Как сделать?
Добрый день. Как сделать (и возможно ли), чтоб при выборе отрицательного ответа в одном из полей.
Переписать данные из текстового файла «a» в файл «b», при этом поменяв все символы ‘.’ на ‘,’
Нужно переписать данные из файла a в файл b, при этом поменяв все символы ‘.’ на ‘,’. While not.
Как «деактивировать» popupmenu при наведении на другой компонент
Обычно оно деактивируется когда кликаешь куда-нибудь,а потом при вызове опять появляется. А мне.
Как убрать «кружок с крестом» при наведении на пост?
Добрый день помогите убрать «кружок с крестом» при наведении на пост. я там понимаю это собака.
Составьте алгоритм, утраивающий каждую букву в заданном тексте (при этом, например, из слова «кот» должно получиться слово «кккоооттт»). Выведите
28.Составьте алгоритм, утраивающий каждую букву в заданном тексте (при этом, например, из слова.
Смещение текста пункта меню при наведении
Всем привет! Я создал меню сайта, но когда него наводиш курсор, то текст под меню начинает «бегать » по екрану и становится после меню. Вот сss и html
Нестандартное оформление пункта меню при наведении
Можете помочь с оформлением меню, точнее как сделать. Вот пример.
Настроить подсветку пункта меню при наведении
Добрый день, коллективный разум! Не могу сделать так, чтобы текст в Меню 1 подсвечивался как в.
Элемент меню, меняющегося изображения и текста, при наведении.
Здравствуйте уважаемые, форумчане! Я тут у вас новенький, так вот поэтому прошу вас скинутся по 100.
Вы везде где есть hover поменяли?
Для начала закоментируйте все hover, а потом по одному добавляйте.
так я 15 минут перед тем как скинуть картинку, скинул весь код css
html код више
Добавлено через 3 минуты
а картинку я скинул, для того чтоб все поняли что у меня неправильно работает
,
следите за тегами.
P.S. Пример не кроссбраузерный, и является всего лишь демонстрацией.
Добавлено через 11 минут
я вам писал ранее:
когда будете делать, обязательно просматривайте в ИЕ и опере, делайте кроссбраузерно, есть пользователи как ни странно которые пользуются даже ИЕ и оперой.
Добавлено через 7 минут
Для информации цитата, пока меня не заплевали любители оперы:
Спустя 20 лет работы в браузерном бизнесе, специалисты Opera Software прекращают разработку десктопной версии браузера. Фактически, Opera больше не будет разрабатывать и поддерживать свой HTML-движок Presto. В мобильных платформах браузер будет работать на технологии WebKit. Некоторые эксперты предрекают норвежской компании уход из рынка.
Сообщается, что без своих собственных разработок, Opera станет еще одной компанией, которая использует движок с открытым исходным кодом Chromium и скорее всего выпустит продукт на базе этой технологии, с новым названием. По такому принципу пошла компания «Яндекс», когда запустила «Яндекс.Браузер». Таким образом, на рынке больших браузеров останется всего 4 компании: Microsoft, Google, Mozilla и Apple, а также 3 основные технологии: Trident, Gecko и WebKit.
Был-бы хороший двиг, не меняли бы!
Возможно опера станет рядом с хромом!
Смещение при наведении
Добрый вечер. Продолжаю мучения, на сей раз захотелось какой-то динамики, в ссылках и меню.. в.
При наведении не активные пункты меню смещаются, и не применяются изменения фона при наведении
У меня возникла проблема, при наведении не активные пункты меню смещаются, и не применяются.
Смещение ячейки списка при наведении
Здравствуйте. Делаю список и при наведении граница должна исчезать, однако, при её исчезновении.
Убрать смещение при наведении на ссылку
При наведении на ссылку идёт смещение. Как сделать так чтобы оно не смещалось и размер ссылки был.