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

Влад Мержевич

Тема: CSS псевдоклассы

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

Рис. 1

Рис. 1

Рис. 2

Рис. 2

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Квадраты</title>
  <style>
   div {
    width: 70px; height: 70px;
    display: inline-block;
    margin-right: 5px;
   }
   div:hover { background: #ff9f19; }
   .b { background: black; }
   .r { background: #009abf; }
  </style>
 </head>
 <body>
  <div class="b"></div>
  <div class="r"></div>
  <div class="b"></div>
  <div class="r"></div>
  <div class="b"></div>
 </body>
</html>

Статьи по теме

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