как правильно написать код в css для выполнения задания, изображенного на фото?

Рейтинг: 1Ответов: 1Опубликовано: 26.04.2023

звездочки

<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>STARS-Grahowskij</title>
    <style>
      div.stars {
        overflow: hidden;
      }
      div.star {
        float: left;
        background: url("star0.png");
        width: 75px;
        height: 78px;
      }
      div.stars :hover div.star {
        background-image: url("star1.png");
        width: 76px;
        height: 78px;
        cursor: point;
      }
      div.star :hover ~ div.star {
        background-image: url("star1.png");
        width: 76px;
        height: 78px;
      }
    </style>
  </head>
  <body>
    <div class="stars">
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
      <div class="star"></div>
    </div>
  </body>
</html>
css hover
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Если Вам скажут, что здесь что-то неправильно, то смело можете озвучить приглашение к "пешему эротическому" путешествию.

div.stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

div.star {
  display: grid;
  place-items: center;
  cursor: pointer;
}

div.star::before { font: 75px/1em sans-serif; }

div.star::before { content: '\2606'; }

div.star:hover ~ div.star::before,
div.star:hover::before { content: '\2605'; }
<div class="stars">
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>
<div class="stars">
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>
<div class="stars">
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>