Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

Краткий словарь терминов

Полезные книги

Карта сайта

Этапы создания сайта

Десять важных шагов

Разработка семантического ядра

Обновление информации

Заголовки

Проверка ссылок

Проверка ошибок в коде

Шрифтовое оформление

Навигация по сайту

Метаданные

Выбор кодировки

Ключевые слова

 
Разработка сайтов под ключ

Ссылки по теме

Blogger: Создайте блог БЕСПЛАТНО

WordPress: Платформа для ведения блога

Online-переводчик :: Компания ПРОМТ

Поисковая оптимизация – все дело в написании текстов

Стратегия продвижения сайтов

Новые исследования поискового поведения пользователей

Орфографические словари

Словарь русских синонимов Абрамова

Орфографический словарь Лопатина

Современный словарь иностранных слов

Толковый словарь русского языка Ожегова

Архивы форума "Говорим по-русски"

FAR — программа управления файлами и архивами

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

UltraEdit-32 - текстовый редактор

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

CSS-эффекты наведения указателя мыши

Главная « Уроки Web-мастерства « CSS-эффекты наведения указателя мыши

версия для печати

Эффекты наведения в CSS …

Под эффектом наведения (rollover) имеется в виду визуальный эффект, когда элемент страницы меняется при наведении на него курсора мыши. Оказалось, что это эффективный метод интерфейса для обозначения того, что кнопка или ссылка являются интерактивными и на них можно нажимать.

Ранее для создания подобных эффектов было необходимо использовать JavaScript, но того же самого можно добиться и при помощи одного CSS, используя селектор псевдокласса :hover.

Нужно отметить, что браузер Internet Explorer 6 (и ниже) не поддерживает селектор :hover для элементов, отличных от гиперссылки, поэтому на этом уроке мы сконцентрируемся на эффектах наведения для текстовых и графических ссылок.

Хорошие новости: в IE 7 селектор :hover можно применять к любым элементам.

 

Эффекты наведения для текста …

Эффект наведения можно использовать для изменения любого аспекта внешнего вида элемента. Вы можете изменить размер или цвет шрифта, цвет фона, его оформление, и практически любое свойство, которое только можно применять в стилях текста.

Стили применяются к элементу A, и альтернативный стиль для состояния наведения указывается при помощи селектора а:hover.

Помните, что для правильной работы селекторов псевдоклассов они должны находиться в таблице стилей в следующем порядке: :link, :visited, :hover, :active (запомните сочетание LVHA, или «Love, На!»).

Код:
a:link {
  text-decoration: none; /* убираем подчеркивание */
  color: #000; /* делаем ссылку черной */
}
 

В примере №1 при наведении ссылка становится красной с подчеркиванием.

Пример №1:
a:hover {
  /* при наведении ссылка становится */
  text-decoration: underline; /* подчеркнутой */
  color: #ff0000; /* красного цвета */
}
 

В примере №2 используется популярная техника применения красивой нижней границы вместо обычного подчеркивания. Добавлен небольшой интервал для того, чтобы у ссылки было достаточно свободного места.

Пример №2:
a:hover {
  text-decoration: none; /* убираем подчеркивание */
  color: #ff0000; /* делаем ссылку красной */
  padding-bottom: 2px; /* Добавляем небольшой интервал снизу */
  border-bottom: dotted 2px #ff0000; /* рисуем пунктирный бордюр */
}
 

В примере №3 при наведении курсора меняется и цвет текста, и фоновый цвет. Добавлена также рамка.

Пример №3:
a:hover {
  text-decoration: none; /* убираем подчеркивание */
  color: #fffeed; /* цвет текста */
  padding: 2px;
  background-color: #ee0000; /* фоновый цвет */
  border: solid 1px #999; /* рамка */
}
 

Эффект наведения для изображений …

Эффекты наведения для изображений работают на том же принципе, что и в предыдущих примерах, только для состояния наведения меняется значение background-image. Поскольку в Internet Explorer 6 (и ниже) селектор :hover поддерживается только для элемента A, в примере мы используем ссылку.

В данном примере через таблицу стилей фоновое изображение (back.gif) применяется ко всем ссылкам документа. Указывается, что элемент A должен отображаться как блок, чтобы к нему можно было применить значения ширины и высоты (соответствующие размерам изображения). Правило а:hover указывает другое фоновое изображение (back_over.gif), отображающееся при наведении на ссылку курсора мыши.

Код:
а {
  display: block; /* позволяет указать ширину и высоту */
  width: 150рх; /* ширина  */
  height: 30рх; /* высота */
  text-align: center; /* центрирование текста по горизонтали */
  text-decoration: none; /* убираем подчеркивание */
  line-height: 30рх; /* указывем высоту строки */
  vertical-align: middle; /* центрирование текста по вертикали */
  background-color: #0000ff /* указываем фоновый цвет на случай, если фоновая картинка не загружается */

  background-image: url(back.gif) /* фоновая картинка до наведения мыши */

  background-repeat: no-repeat; /* способ заполнения фона */
  color: #fffeed; /* цвет текста */
}
a:hover {
  background-color: #ee0000 /* указываем фоновый цвет на случай, если фоновая картинка не загружается */

  background-image: url(back_over.gif) /* фоновая картинка в момент наведения мыши */

  background-repeat: no-repeat; /* способ заполнения фона */
  color: #fffeed; /* цвет текста */
}
 

Эффект наведения без предварительной загрузки …

Еще один популярный метод обработки эффектов наведения - это метод «наведения без предзагрузки Pixy», предложенный Petr Staniek (известным как Pixy) в статье: «Fast Rollovers without Preload».

В этом методе все состояния наведения помещаются в одно изображение и при изменении состояния изменяется только свойство background-position. Это позволяет избежать загрузки изображений при каждом изменении состояния (или предварительной загрузки), что может ускорить отображение.

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

Пример:
а {
  display: block; /* позволяет указать ширину и высоту */
  width: 150рх; /* ширина  */
  height: 30рх; /* высота */
  text-align: center; /* центрирование текста по горизонтали */
  text-decoration: none; /* убираем подчеркивание */
  line-height: 30рх; /* указывем высоту строки */
  vertical-align: middle; /* центрирование текста по вертикали */
  background-color: #0000ff /* указываем фоновый цвет на случай, если фоновая картинка не загружается */

  background-position: top left; /* исходное фоновое изображение */

  background-image: url(all_back.gif) /* фоновая картинка до наведения мыши */
  background-repeat: no-repeat; /* способ заполнения фона */
  color: #fffeed; /* цвет текста */
}
a:hover {
  background-color: #ee0000 /* указываем фоновый цвет на случай, если фоновая картинка не загружается */

  background-position: 30рх left; /* смещает положение исходного фонового изображения */

  background-image: url(all_back.gif) /* фоновая картинка в момент наведения мыши */
  background-repeat: no-repeat; /* способ заполнения фона */
  color: #fffeed; /* цвет текста */
}

Применение фоновых изображений и изображений для состояния наведения может вызывать мигание изображения в Internet Explorer для Windows. Для решения проблемы примените фоновое изображение и к ссылке, и к содержащему ее элементу.

Более детальное изучение данной проблемы и возможных решений приводится в статье: «Minimize Flickering CSS Background Images in IE6», автор Ryan Carver.

 
Урок № 13: | Дата: 06.02.2008 | Автор: Коровенков Юрий

Обсудить на форуме…

 
Valid XHTML 1.0! Valid CSS!
Как устроены поисковые системы?

Облик поисковиков

Поисковые системы

Индекс поисковой системы

Полнотекстовый поиск

Учет морфологии

Релевантность

Методы регистрации

Индекс цитирования

 
Заголовки разделов текущей страницы…

Оглавление

Эффекты наведения для текста…

Эффект наведения для изображений…

Эффект наведения без предварительной загрузки…

 
Уроки Web-мастерства

Уроки Web-мастерства

Управление web-проектом

Как более эффективно писать для Сети?

Как сделать сайт максимально удобным?

Особенности структуры текста на Web-сайте

Создание компонентов интерфейса в XHTML

Создаем CSS-меню

Основные типы CSS-макетов

Раскрывающиеся CSS-меню

Создание многоуровневых раскрывающихся CSS-меню

CSS-методы замены текста изображениями

Прямоугольники с закругленными углами на основе CSS

CSS-методы центрирования web-страницы

CSS-стили для шрифтов и текста

Навигационные CSS-панели на основе списков

Свободное размещение в CSS

Создание эффекта mouseover при помощи CSS

Таблицы для верстки - это не обязательно зло

Внедрение ролика Windows Media на Web-страницу

Добавление Flash на Web-страницу

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov