Как сделать подсветку при наведении мыши css
Перейти к содержимому

Как сделать подсветку при наведении мыши css

  • автор:

Как изменить цвет ссылки при наведении?

Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, который добавляется к селектору A . Сперва через селектор A задаём цвет обычных ссылок, затем с помощью :hover задаём цвет ссылок при наведении (пример 1).

Пример 1. Изменение вида ссылки

В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited . Это имеет значение, иначе посещённые ссылки не будут менять свой цвет.

Вид ссылки при наведении

Рис. 1. Вид ссылки при наведении

Аналогично можно поменять и цвет фона под ссылкой при наведении на неё, добавив свойство background к селектору a:hover , как показано в примере 2.

Пример 2. Изменение цвета фона ссылки

Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding.

Изменение цвета фона ссылки

Рис. 2. Изменение цвета фона ссылки

См. также

  • :focus на мобильных устройствах
  • background
  • color
  • currentColor
  • text-fill-color
  • Анимация ссылок при наведении
  • Атрибут link
  • Виды ссылок
  • Всплывающая подсказка
  • Единицы цвета в CSS
  • Использование :hover
  • Линейный градиент
  • Наследование в CSS
  • Несколько фоновых картинок
  • Нормальное позиционирование
  • Переходы с помощью :hover
  • Подсветка строк и колонок таблицы
  • Псевдокласс :hover
  • Псевдоклассы в CSS
  • Работа с типографикой
  • Селекторы CSS
  • Состояния кнопок
  • Сочетание с псевдоклассами
  • Спрайты
  • Типы ссылок
  • Установка фона и градиента
  • Фоновая картинка

Подсветка картинки при наведении мыши

Хорошей практикой веб-строительства является создание таких гиперссылок (и других активных элементов), которые изменяются при наведении мыши. У гиперссылок, по спецификации W3C, даже существует для этого специальный псевдоклассhover. С его помощью несложно организовать подсветку для всех ссылок на странице сразу (например, в присоединённом к странице файле style.css):

Сложнее сделать подсветку, если вместо текста в гиперссылке находится картинка. Тогда для «подсветки» необходимы две картинки, одна из которых меняется на другую при наведении мыши. Человеку, не вникающему особо в HTML (например, PHP-программисту) это может показаться таким сложным, что без javascript ну никак не сделаешь. А javascript сам по себе тоже сложный. Так появляются на свет сайты, использующие для подсветки ссылок jQuery. Бывают и просто на javascript. Например, так: делаются два элемента div с id «p1» и «p1_b» с атрибутами onmouseover onmouseout каждый, и две функции:

И всё прекрасно работает (http://ir2.ru/static/hover/hover1.htm). Правильнее, конечно, было бы писать не document.all , а document.getElementById , но оно и так прекрасно работает. Как оказалось, даже в Опере и в Мозилле (FF).

Намного естественней делать подсветку ссылок (даже с картинками) всё-таки на CSS. Для каждого элемента с картинкой тогда надо будет прописать правила вида:

И вот что получится: http://ir2.ru/static/hover/hover3.htm. Заметны два недостатка: 1) при наведении мыши картинка меняется не мгновенно, а с задержкой, требующейся для загрузки нового изображения; 2) в ИЕ картинка вообще не меняется. Ну, а чего же вы хотели: HTML-документ без doctype преподнесёт вам ещё не один сюрприз. Всегда ставьте валидный (правильный, соответствующий рекомендациям W3C) doctype! В нашем случае не надо крутого HTML5 или XHTML, вполне достаточно будет

А первый недостаток никакой хитростью не исправишь, кроме как простой предварительной загрузкой всех необходимых картинок в невидимом режиме (preload) – создадим невидимый элемент div и поместим туда картинки, которые будут сменять основные при наведении мыши. И у нас получится что-то вроде http://ir2.ru/static/hover/hover4.htm.

Там, правда, мы ввели ещё одно упрощение, и теперь всё будет работать даже без doctype: мы убрали элемент div с фоновой картинкой, в котором находилась ссылка, и сделали для самой ссылки фоновую картинку, установив заодно для элементов a правило display:block; .

Это, последнее решение, в общем-то можно было бы считать идеальным. Но бывают ситуации, когда для более удобного программирования всё-таки требуется javascript. Это, например, ситуация «расширения» проекта, когда требуется добавить ещё одну ссылку в меню (или несколько ссылок). Для новых ссылок придётся писать руками новые правила CSS, с указанием наименований новых файлов фоновых картинок – что служит дополнительным источником человеческих ошибок.

Так у нас получится http://ir2.ru/static/hover/hover2.htm. Там, конечно, мы учли все усовершенствования, найденные выше (типа preload), и добавили новое: ни к чему удвоения элементов, если можно просто поменять у картинки атрибут src (это, конечно, требует некоторого знания регулярных выражений – и знания того факта, что на javascript с ними можно работать). Правила CSS несколько упростятся, так как мы не используем в этом примере фоновые картинки для ссылок (и не надо задавать явно ширину и высоту элементов).

Напоследок создадим HTML-документ, в «меню» которого можно добавлять новые ссылки с картинками внутри, даже без указания свойств onmouseover: http://ir2.ru/static/hover/hover5.htm. Единственное требование – если простая картинка имеет имя name, то изменённая (при наведении мыши) должна иметь имя вида name_b. Заметим, что для обеспечения простоты дальнейшего программирования (и чистоты кода) HTML, размер javascript (файл http://ir2.ru/static/hover/hover5.js) вырастает в размерах катастрофически (в 4 раза). Так что хрен его знает – может, всё-таки лучше делать подсветку на CSS.

Веб-сайт в одной странице: самый короткий учебник HTML

  • Установка archlinux 2017-12-08
  • Галерея изображений
  • Блокнот, MS Word и LibreOffice Writer
  • Linux Mint в школе
  • Сайт третьего поколения
  • Как скрыть-отобразить элемент по щелчку на другом элементе?
  • Подсветка строк и столбцов HTML-таблицы
  • Ссылки next и previous на странице
  • HTML в веб-приложении
  • Информационные сущности или инфоблоки
  • Шаблон и Контроллер
  • Отделение данных от php кода
  • javascript внутри веб-приложения
  • ООП в PHP – антипаттерн
  • Конструктор HTML форм
  • Числа прописью с рублями, минутами и метрами
  • Календарь javascript (datepicker)
  • Что из чего следует в PHP-фреймворке «Friends»
  • PHP фреймворк, анти-MVC, без ООП
  • Идеальная функция setCookie
  • Отображение настроек для javascript сортировки
  • Что такое Контроллер mvc в вебе?
  • javascript сортировщики, сравнение алгоритмов
  • unobtrusive top.mail.ru
  • Простой сортировщик HTML таблиц, версия 0.03
  • Подсветка строк, столбцов и значений в HTML таблице
  • Отложенная загрузка javascript
  • Кэширование промежуточных результатов в веб-программировании
  • javascript и php: синхронизация сущностей
  • Скругление углов CSS, JavaScript
  • Javascript и логика представления (design pattern «JS-словари»)
  • Структура WYSIWYG-редактора сайта
  • Подсветка картинки при наведении мыши
  • Визуальные редакторы: для кого они?
  • Веб/2: сайты нового поколения
  • Как измерить скорость работы Javascript?
  • Функция для работы с className в javascript
  • Сортировщик HTML таблиц, версия 1
  • Сортировщик HTML таблиц: концепция и «нулевой цикл»
  • Как с очень высокой скоростью найти слово в большой таблице?
  • Как в большом списке найти слово с очень высокой скоростью?
  • HTML база данных лучше, чем Excel
  • Javascript база данных
  • Сортировщик HTML-таблиц, версия 1.3
  • Проверка условий в Javascript
  • Скрыть – показать HTML элементы с помощью Javascript
  • Таймеры в Javascript (setInterval, setTimeout)
  • Javascript фильтрация данных
  • Javascript: вопросы и ответы
  • Javascript: часто задаваемые вопросы
  • Редактирование таблицы MySQL: Javascript интерфейс
  • Редактирование таблицы MySQL в браузере
  • 10 лучших функций Javascript
  • Сортировка таблицы средствами JavaScript — DOM
  • DHTML: условная разметка для HTML кода
  • DHTML: защита форума
  • DHTML: хранение настроек пользователя
  • DHTML: проверка формы
  • DHTML
  • JavaScript
  • HTML таблицы
  • Самый быстрый браузер

Как сделать тень при наведении css

CSS-свойство box-shadow добавляет тень к элементу. Через запятую можно задать несколько теней. Тень описывается смещениями по оси X и Y относительно элемента, радиусом размытия и распространения, а также цветом. Для создания эффекта, когда тень появляется при наведении курсора мыши на элемент, необходимо использовать псевдокласс :hover .

 class="box-with-shadow"> У этого элемента будет тень 
.box-with-shadow  /* Ширина блока */ width: 250px; /* Внутренние отступы */ padding: 32px; /* Цвет фона в элементе */ background-color: #38d9a9; /* Сделаем видимую границу элементу */ border: 1px solid #333; > .box-with-shadow:hover  /* Свойство отвечающее за формирование тени 8px - отступ по оси Х 10px - отступ по оси Y 5px - радиус размытия тения 2px - радиус распространения rgba - функция формирующая цвет тени */ box-shadow: 8px 10px 5px 2px rgba(0, 0, 255, .2); > 

Подсветка блока при наведении курсора мыши

В этом уроке мы научимся создавать блоки, фон которых будет меняться при наведении на них курсора.

Html

Мы будем использовать список ссылок, внешний вид которых настроим при помощи css. Код html:

Можно расширить наш список, добавив элементы

CSS

#links ul < list-style-type: none; width: 700px; >#links li < border: 1px dotted #999; border-width: 1px 0; margin: 5px 0; >#links li a < color: #990000; display: block; font: bold 120% Arial, Helvetica, sans-serif; padding: 5px; text-decoration: none; >* html #links li a < width: 700px; >#links li a:hover < background: #ffffcc; >#links a em < color: #333; display: block; font: normal 85% Verdana, Helvetica, sans-serif; line-height: 125%; >#links a span

Можете создать собственный стиль ссылок, изменяя параметры css.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *