Файл, в который нужно добавить строку
<html>
<head>
<meta http-equiv="content-type" charset="utf-8">
<style>
.box {width:400px; height:30px;
font-size:28px;
text-align:center;
border:6px solid;
padding:30px;
margin:10px;
position:absolute}
#red {color:#800000; border-color:#ff0000; background-color:#ff8080}
#orange {color:#804000; border-color:#ff8000; background-color:#ffc080}
#yellow {color:#808000; border-color:#ffff00; background-color:#ffff80}
#green {color:#008020; border-color:#00ff40; background-color:#80ff90}
#cyan {color:#008080; border-color:#00ffff; background-color:#80ffff}
#blue {color:#000080; border-color:#0000ff; background-color:#8080ff}
#violet {color:#400080; border-color:#8000ff; background-color:#c080ff}
#red {top:100px; right:250px}
#orange {top:450px; right:600px}
#yellow {top:70px; right:450px}
#green {top:620px; right:250px}
#cyan {top:700px; right:490px}
#blue {top:20px; right:290px}
#violet {top:800px; right:650px}
/* Добавьте своё правило вместо этой строки */
</style>
</head>
<body>
<div class="box" id="red">Каждый</div>
<div class="box" id="orange">Охотник</div>
<div class="box" id="yellow">Желает</div>
<div class="box" id="green">Знать</div>
<div class="box" id="cyan">Где</div>
<div class="box" id="blue">Сидит</div>
<div class="box" id="violet">Фазан</div>
</body>
</html>
Как нужно изменить внешний вид файла
«При наведении курсора» означает, что когда курсор не наведён ни на один из блоков, то всё должно оставаться как сейчас («в момент щелчка» — аналогично). Если ничего такого не написано, значит, речь идёт о постоянной ситуации. Кстати, псевдокласс active (как и hover) работает для любых объектов, а не только для ссылок.
Пример.
Задание: «при наведении курсора на любой блок он оказывается поверх остальных блоков»
Решение:.box:hover {z-index:99}
| Ученик | Задание |
| Амирахова Ангелина | При наведении курсора на любой из блоков текст в нём увеличивается |
| Амосов Георгий | При наведении курсора на красный блок он перемещается в верхний левый угол и становится чёрно-белым (чёрная рамка, чёрная надпись, белый фон) |
| Антоник Арина | У красного блока рамка становится двойной |
| Буров Всеволод | Во всех блоках все надписи становятся курсивными, а рамочки — двойными |
| Геворгян Кристина | При наведении курсора на красный блок его рамка внезапно становится жёлтой |
| Гетманова Мария | В синем блоке текст становится жирным, а рамочка двойной |
| Деркач Никита | При наведении курсора на любой из блоков текст в нём становится жирным, а рамочка исчезает |
| Захарчук Алексей | В момент щелчка по любому из блоков он оказывается в левом верхнем углу страницы, а размер текста в нём увеличивается вдвое (без изменения размера самого блока!) |
| Иванова Мария | Все блоки становятся вдвое короче, а рамка у них становится пунктирной |
| Ладыжина Лидия | Надпись в голубом блоке становится курсивной и жирной |
| Мичугина Инга | Надпись в синем блоке становится белой, а рамочка — двойной |
| Морозова Полина | Текст во всех блоках увеличивается, а надписи становятся курсивными |
| Никонова Анастасия | При наведении курсора на любой из блоков его рамка становится пунктирной, а текст оказывается написан «большими буквами» (small caps) |
| Подольская Верена | В синем блоке надпись и рамка становятся чёрными, а фон — белым |
| Смирнова Екатерина | Рамочка у жёлтого блока становится оранжевой |
| Умарова Александра | Текст в жёлтом блоке становится красным, а фон — белым |
| Фомин Тимофей | В момент щелчка по голубому блоку он оказывается в правом нижнем углу страницы, толщина рамочки в нём увеличивается вдвое, а фон становится темнее |
| Цыганова Анастасия | При наведении курсора на жёлтый блок он оказывается «сзади» за остальными блоками, а его рамка становится красной |
| Червяков Константин | При наведении курсора на любой блок его высота и ширина увеличиваются вдвое, при этом размер шрифта не изменяется |
