Как при наведении на элемент изменить его цвет и цвет соседнего элемената

Question

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

Answer 1

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.

Answer 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>

БЛОГ НА HUSL

Как при наведении на элемент изменить его цвет и цвет соседнего элемената

Ответы (2 шт):