2

Имеется прозрачная и закрашенная картинка звезды, как сделать так, чтобы при наведении на вторую звезду, менялась и вторая и первая звезда на закрашеную звезду?

2 ответа 2

4

main {
  display: inline-flex;
  flex-direction: row-reverse;
}

div {
  height: 2em;
  width: 2em;
  line-height: 2em;
  text-align: center;
  border: 1px solid;
  border-radius: 50%;
}

div + div {
  margin-right: .25em;
}

div:hover, div:hover ~ div {
  background: antiquewhite;
}
<main>
  <div>5</div>
  <div>4</div>
  <div>3</div>
  <div>2</div>
  <div>1</div>
</main>

И более комфортный вариант:

main {
  display: inline-flex;
  flex-direction: row-reverse;
}

div {
  height: 2em;
  width: 2em;
  line-height: 2em;
  text-align: center;
  border: 1px solid;
  border-radius: 50%;
}

section + section {
  padding-right: .25em;
}

section:hover div, section:hover ~ section div {
  background: antiquewhite;
}
<main>
  <section><div>5</div></section>
  <section><div>4</div></section>
  <section><div>3</div></section>
  <section><div>2</div></section>
  <section><div>1</div></section>
</main>

И для круглой формы:

main {
  display: inline-flex;
  flex-direction: row-reverse;
}

div {
  height: 2em;
  width: 2em;
  line-height: 2em;
  text-align: center;
  border: 1px solid;
  border-radius: 50%;
}

section {
  border-radius: 50% 0 0 50%;
  position: relative;
}

section + section {
  padding-right: 1.25em;
  margin-right: -1em;
}

section:hover div, section:hover ~ section div {
  background: antiquewhite;
}
<main>
  <section style="z-index:5"><div>5</div></section>
  <section style="z-index:4"><div>4</div></section>
  <section style="z-index:3"><div>3</div></section>
  <section style="z-index:2"><div>2</div></section>
  <section style="z-index:1"><div>1</div></section>
</main>

PS: Можно сделать аналогично с помощью float: right.

1
  • Отличный ответ. Просто и полезно 24 мар 2020 в 6:55
2

section, div {
  display: inline-block;
}

div {
  height: 2em;
  width: 2em;
  line-height: 2em;
  text-align: center;
  border: 1px solid;
  border-radius: 50%;
}

section:hover > div {
  background: antiquewhite;
}
<section><div>1</div>
  <section><div>2</div>
    <section><div>3</div>
      <section><div>4</div>
        <section><div>5</div>
</section></section></section></section></section>

При желании можно применить тот же фокус для кругов:

section, div {
  display: inline-block;
}

div {
  height: 2em;
  width: 2em;
  line-height: 2em;
  text-align: center;
  border: 1px solid;
  border-radius: 50%;
}

section:hover > div {
  background: antiquewhite;
}

section section {
  border-radius: 2em 0 0 2em;
}
<section><div>1</div>
  <section><div>2</div>
    <section><div>3</div>
      <section><div>4</div>
        <section><div>5</div>
</section></section></section></section></section>

3
  • если ещё кликабельно сделаешь ...то есть что бы сохранялось состояние ..будет ваще атас 24 мар 2020 в 1:10
  • @MaximLensky, это не просили. Но надо просто заменить div на label и кинуть радиобаттоны в самое начало.
    – Qwertiy
    24 мар 2020 в 1:17
  • я знаю как это сделать...но хочу посмотреть как это делают другие Коллеги по Цеху ... 24 мар 2020 в 1:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.