Создание эффектов наведения ссылок CSS может добавить немного изюминки на скучную веб-страницу. Если вы когда-либо оказывались в тупике, пытаясь создать эффект плавного наведения, у меня есть шесть CSS-эффектов, которые вы можете взять и использовать для своего следующего проекта. Давайте перейдем прямо к делу! Я знаю, что мы говорим :hover и все такое, но иногда (но, возможно, не всегда) это может быть хорошей идеей:focus, поскольку не все взаимодействия осуществляются непосредственно с помощью мыши, но, возможно, нажатием или нажатием клавиши...

Эффект наведения ссылки с изменением цвета справа налево Лично мне нравится использовать этот эффект для ссылок в навигации. Ссылка начинается одним цветом без подчеркивания. Затем, при наведении курсора, справа появляется новый цвет, а слева - подчеркивание. Красиво, правда? Там происходит много движения, поэтому вы можете рассмотреть последствия доступности и обернуть все это в prefers-reduced-motion запрос, чтобы заменить его чем-то более тонким для тех, кто чувствителен к движению. Вот как это работает...

Свойство с помощью которого можно изменить курсор мыши называется cursor. Оно может принимать разные значения: crosshair, default, pointer и т.д. Переходим к практике. Для начала выполняем стандартные действия: создаем html-страницу и прописываем в ней ссылку на css-файл (о том как это сделать можно прочитать здесь). Далее добавляем на страницу ряд ссылок (в моем случае их 8) с атрибутом id. Вот так это должно выглядеть: В итоге у нас должен получиться ряд из восьми абсолютно одинаковых ссылок (но при этом значения атрибутов id будут разными)...