Как применить стили для элементов между классом и элементом hovered? - PullRequest
Новая
       9

Как применить стили для элементов между классом и элементом hovered?

0 голосов
/ 10 апреля 2020

Я пытаюсь оптимизировать свой виджет календаря. Я хочу заполнить все элементы между selected_first и button:hover отдельным цветом (см. Пример кода): 

body {
  background: #000;
}

div {
  counter-reset: btn;
  display: flex;
  flex-flow: row wrap;
  max-width: 200px;
}

button {
  flex: 0 0 20%;
  display: block;
  height: 30px;
  border: 0;
  background-color: #333;
  color: #fff;
  border: 1px solid #000;;
}

button:before {
  counter-increment: btn;
  content: counter(btn);
}

button[value="selected_first"] {
  background: green !important;
}

button[value="selected_first"] ~ button, button:hover {
  background: blue;
}

button[value="selected_first"] ~ button:hover ~ button {
  background: #333;
   }
<div>
  <button></button>
  <button></button>
  <button value="selected_first"></button>
  <button></button>
  <button></button>
  <button></button>
  <button></button>
  <button></button>
  <button></button>
  <button></button>
</div>

Это работает для меня, когда на кнопку мыши надета кнопка мыши. Но это не работает, когда ни одна из кнопок не зависла. Это должно выглядеть так: ожидаемый результат

, но когда ни одна из кнопок не зависла, у них все равно появляется синий фон.

1 Ответ

1 голос
/ 10 апреля 2020

Рассмотрим наведение на родительский элемент 

body {
  background: #000;
}

div {
  counter-reset: btn;
  display: flex;
  flex-flow: row wrap;
  max-width: 200px;
}

button {
  flex: 0 0 20%;
  display: block;
  height: 30px;
  border: 0;
  background-color: #333;
  color: #fff;
  border: 1px solid #000;;
}

button:before {
  counter-increment: btn;
  content: counter(btn);
}

button[value="selected_first"] {
  background: green !important;
}



div:hover button[value="selected_first"] ~ button,
div:hover button:hover {
  background: blue;
}
div:hover  button:hover ~ button {
  background: #333;
 }
<div>
  <button></button>
  <button></button>
  <button value="selected_first"></button>
  <button></button>
  <button></button>
  <button></button>
  <button></button>
  <button></button>
  <button></button>
  <button></button>
</div>
...