Пятница, 22 Июня 2012 09:38

Верстка сайта. Урок 10. Псевдокласс :hover

Written by 
Оцени эту запись
(1 Голос)

Псевдокласс :hover задает изменение стилей элемента при наведении на него курсора мыши.

 

a {color: red}

a:hover {color: blue}

 

Изменение при наведении при помощи :hover можно задавать любым элементам:

 

  • ссылка <a> (не можно, а нужно задавать)
  • <span>
  • tr (подсветка строки таблицы - помогает легче ориентироваться в сложной таблице)
  • кнопкам <button>, <input type="submit"> (им нужно менять внешний вид при наведении и при клике)

 

При наведении можно менять такие стили элементов:

 

  • цвет текста color
  • цвет фона background-color
  • фоновую картинку background-image
  • отступы margin

и т.д.

 

Старые версии IE воспринимают :hover только для ссылок <a>. Если вам нужна кросссбраузерная верстка изменения при наведении любых других элементов, можно использовать хак для IE6, например, ie6hover.htc или событие .hover() на jQuery(Динамика при наведении с помощью JavaScript).

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов