Уроки CSS

Событие hover в CSS

Каждый замечал, что при наведении курсора мышки на ссылку, пункт меню или баннер, что-то происходит – меняется цвет ссылки, изменяется картинка и т.д. Все эти эффекты можно задать с помощью CSS.

Напишем пример, где с помощью класса зададим некоторые параметры для ссылки – цвет, подчёркнута или нет; цвет при наведении курсора.

<style>
a.my_a0 {
	color: #82E73A;
	outline: none;
	text-decoration: underline;
}

a.my_a0:hover{
	color: #E7963A;

}
</style>

<a class="my_a0" href="#">Цветная ссылка</a>

Цветная ссылка

Теперь рассмотрим более интересный пример, который можно потом применять для создания простого меню.

Сделаем три таблицы:

У первой таблицы при наведении курсора будет меняться цвет ячеек;
У второй таблицы при наведении курсора будет меняться цвет ячеек и цвет текста внутри них;
А у третьей таблице при наведении курсора цвет будут изменять все ячейки, которые расположены внутри <tr></tr>

<style>
#all_tb {
 border: 2px solid #FFEBBF;
 background: White;
 margin: auto;
}

table td.tb_1 {
        background: #EBFFB7;
        color: Black;
		width: 200px;
		height: 50px;
    }
	
table td.tb_1:hover {
        background: #9BE631;
    }	
	
	
	table td.tb_2 {
        background: #EAC4FF;
        color: Black;
		width: 250px;
		height: 40px;
		text-align: center;
    }
	
table td.tb_2:hover {
        background: #CB71FF;
		color: White;
    }
	
	
		table tr.tr_3 {
        background: #E4F5F5;
        color: Black;
		width: 200px;
		height: 30px;
    }
	
table tr.tr_3:hover {
        background: #CAECFC;
    }
	
</style>

<table id="all_tb" cellspacing="8" > 
<tr>
<td class="tb_1">Текст текст</td>
</tr>
<tr>
<td class="tb_1">Слова слова</td>
</tr>
<tr>
<td class="tb_1">Буквы буквы</td>
</tr>
<tr>
<td class="tb_1">Предложения</td>
</tr>
<table>

<br>
<br>

<table id="all_tb" cellspacing="4" > 
<tr>
<td class="tb_2">Текст текст</td>
</tr>
<tr>
<td class="tb_2">Слова слова</td>
</tr>
<tr>
<td class="tb_2">Буквы буквы</td>
</tr>
<tr>
<td class="tb_2">Предложения</td>
</tr>
<table>

<br>
<br>

<table width="590" id="all_tb" cellspacing="4" > 
<th colspan="3" bgcolor="#FFF5D5"> Название</th>
<tr class="tr_3">
<td >Текст текст</td>
<td >Текст текст</td>
<td >Текст текст</td>
</tr>
<tr class="tr_3">
<td >Слова слова</td>
<td >Текст текст</td>
<td >Текст текст</td>
</tr>
<tr class="tr_3">
<td >Буквы буквы</td>
<td >Текст текст</td>
<td >Текст текст</td>
</tr>
<tr class="tr_3">
<td >Предложения</td>
<td >Текст текст</td>
<td >Текст текст</td>
</tr>
<table>

Текст текст

Слова слова

Буквы буквы

Предложения

Текст текст

Слова слова

Буквы буквы

Предложения

Название
Текст текст	Текст текст	Текст текст
Слова слова	Текст текст	Текст текст
Буквы буквы	Текст текст	Текст текст
Предложения	Текст текст	Текст текст

◄ Предыдущий урок

Содержание

Следующий урок ►