псевдоклассы

Чередующиеся квадраты

Сделайте набор квадратов, у которых меняется цвет заливки (рис. 1). При наведении на любой квадрат его цвет меняется на оранжевый (рис. 2).

Рис. 1

Рис. 1

Рис. 2

Рис. 2

Обратная связь

Сделайте блок с фиксированным положением, который не будет изменять свою позицию при прокрутке страницы. Изначально блок практически полностью скрыт, но при наведении на него курсора мыши он плавно выезжает вправо (рис. 1). Если курсор убрать, то блок плавно возвращается в исходное положение.

Положение блока при наведении на него курсора

Рис. 1. Положение блока при наведении на него курсора

Ход конём

Сделайте таблицу 3х3 с фиксированной шириной и высотой ячеек. При щелчке по любой ячейке в ней выводится изображение коня (рис. 1). Повторный щелчок по ячейке убирает в ней коня. Код должен работать во всех современных браузерах.

Рис. 1

Рис. 1

Ссылка как кнопка

Сделайте ссылку, которая при наведении на неё курсора мыши меняла свой вид, как показано на рис. 1.

Рис. 1

Рис. 1

Так-тикс

Поле для игры в так-тикс имеет размер 5х5 клеток, в каждой клетке содержится круглая фишка (рис. 1).

Исходное поле для игры в так-тикс

Рис. 1. Исходное поле для игры в так-тикс

При наведении курсора мыши на любую клетку подсвечивается ряд, строка и сама фишка (рис. 2).

Вид поля при наведении на клетку курсора мыши

Рис. 2. Вид поля при наведении на клетку курсора мыши

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.