Как выделить ячейки?

Question

[Макс]

Добрый день)
У меня есть простая grid-разметка календаря:

<div class="grid grid-cols-8 grid-rows-6">
    <a href="#">1</a>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <a href="#">2</a>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <a href="#">3</a>
    etc...
</div>

Мне нужно, чтобы при наведении на ссылку (первая колонка с номером недели) менялся бэкграунд следующих семи дивов (до следующей ссылки). Как бы подсветить неделю нужно)

Можно ли это реализовать штатными средствами CSS, без использования JavaScript? Я много пробовал играться с nth-child, но безуспешно :(

Answer 1

[Danny Arty]

Учитывая, что они все являются дочерними элементами одного блока, и например дефолтный цвет фона div-ов background: #eee;, можно сделать так:

.grid a:hover ~ div { 
  background: #444;
}
.grid a:hover ~ a ~ div  {
  background: #eee;
}

Т.е. получается мы меняем фон всех родственных div-ов находящихся после тега a. Но родственными для него будут и div-ы относящиеся к другой неделе, поэтому вторым стилем мы возвращаем дефолтный фон всем div-ам, следующим после следующих родственных тегов a.

Вот наглядный пример

Comments

[Сергей delphinpro]

Можно без переопределения.

-.grid a:hover ~ div {
+.grid a:hover ~ div:not(.grid a:hover ~ a ~ div) {
   background: #444;
 }
-.grid a:hover ~ a ~ div  {
-  background: #eee;
-}

[Danny Arty]

Сергей delphinpro, а, точно, чет забыл про :not

[Макс]

Сергей delphinpro, Класс! А если как-нибудь элегантно сделать, чтобы строка выделялась в рамку по контуру, включая саму ячейку с номером недели? То есть бордер был только по краям всей строки, а не у всех ячеек?

Answer 2

[Алексей Гончаров]

А почему не хочется с js?
Это делается вот так:
https://learn.javascript.ru/mousemove-mouseover-mo...