- index.html
- style.css
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Псевдокласс :hover</title>
<link rel="stylesheet" href="course-4.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cup-standings">
<h1>Личный зачёт кубка мира</h1>
<table>
<tr>
<th>№</th>
<th>Спортсмен</th>
<th>Очки</th>
</tr>
<tr>
<td>1.</td>
<td>Мартен Фуркад
<em>Франция</em>
</td>
<td>
<strong>151</strong>
</td>
</tr>
<tr>
<td>2.</td>
<td>Эмиль-Хегле Свендсен
<em>Норвегия</em>
</td>
<td>
<strong>121</strong>
</td>
</tr>
<tr>
<td>3.</td>
<td>Алексис Бёф
<em>Франция</em>
</td>
<td>
<strong>110</strong>
</td>
</tr>
<tr>
<td>4.</td>
<td>Арнд Пайффер
<em>Германия</em>
</td>
<td>
<strong>105</strong>
</td>
</tr>
<tr>
<td>5.</td>
<td>Евгений Устюгов
<em>Россия</em>
</td>
<td>
<strong>104</strong>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS
table {
background: rgba(255, 255, 255, 0.95);
}
tr:hover {
}
strong:hover {
}
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
0
Усовершенствуйте таблицу результатов, добавив подсветку строк и очков:
- В CSS-правило с селектором
tr:hoverдобавьте свойствоbackground-color: #fcf8e3;. - В
strong:hoverсвойствоcolor: #0088cc;.
Наведите курсор мыши на строки таблицы и на очки биатлонистов для проверки работы подсветки.