Псевдокласс hover.

Как Вы уже, наверное, догадались, псевдокласс hover активизируется в том случае, если на элемент наведен курсор.

Ну а раз уж догадались просто покажу пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Псевдоклассы< /title>
< style type=" text/css" >
.menu {
display: block;
width: 180px;
background-color: #fff8dc;
color: #008;
font-size: 16px;
text-decoration: none;
padding: 3px;
}
.menu: hover {
display: block;
width: 180px;
background-color: #b8860b;
color: #fff;
padding: 3px;
font-size: 16px;
text-decoration: none;
}
tr: hover {
background-color: #b8860b;
}
< /style>
< /head>
< body>
< p> Чем Вам не блок навигации по сайту? < /p>
< a href=" #" class=" menu" > Главная< /a>
< a href=" #" class=" menu" > Карта сайта< /a>
< a href=" #" class=" menu" > Купить слона< /a>
< a href=" #" class=" menu" > Продать слона< /a>
< a href=" #" class=" menu" > Взять слона на прокат< /a>
< hr>
< p> А вот ещё один распространенный трюк.. строки в таблице подсвечиваются при наведении на них курсором.< /p>
< table border=" 1" bordercolor=" #ccc" width=" 600" cellpadding=" 1" cellspacing=" 0" >
< tr>
< td> Иванов< /td> < td> +< /td> < td> & nbsp; < /td> < td> & nbsp; < /td> < td> +< /td> < td> & nbsp; < /td> < td> & nbsp; < /td>
< /tr>
< tr>
< td> Петров< /td> < td> & nbsp; < /td> < td> +< /td> < td> & nbsp; < /td> < td> & nbsp; < /td> < td> +< /td> < td> & nbsp; < /td>
< /tr>
< tr>
< td> Сидоров< /td> < td> & nbsp; < /td> < td> & nbsp; < /td> < td> +< /td> < td> & nbsp; < /td> < td> & nbsp; < /td> < td> +< /td>
< /tr>
< /table>
< /body>
< /html>

Несколько слов к примеру выше..

Как Вы наверное заметили в качестве селектора псевдокласса может выступать не только какой либо элемент - тег, но и класс или идентификатор. Так в примере к классу .menu применён псевдокласс hover и синтаксис приобретает следующий вид:

.menu: hover { color: #ff0000; }

Не запутались в терминологии?

Простыми словами мы сказали браузеру что мол подсвечивай красным только те ссылки которые находится в навигационном блоке (выведены в класс .menu), а остальное оставь как есть!

Псевдокласс hover может быть применён к любому элементу, выводимому на экран, так в нашем примере, для того чтобы организовать подсветку строк таблицы мы применили его к тегу < tr>. Однако следует отметить, что браузер Internet Explorer 6 и его более ранние версии поддерживает псевдокласс hover только для ссылок - тег < a>, так что, к примеру, строки таблицы, при наведении на них курсора, в браузерах IE6 и ниже подсвечиваться не будут!