@kopcapuk

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

Добрый день)
У меня есть простая 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, но безуспешно :(
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
DanArst
@DanArst Куратор тега CSS
Гриффиндор в моде при любой погоде!
Учитывая, что они все являются дочерними элементами одного блока, и например дефолтный цвет фона div-ов background: #eee;, можно сделать так:
.grid a:hover ~ div { 
  background: #444;
}
.grid a:hover ~ a ~ div  {
  background: #eee;
}

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

Вот наглядный пример
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
А почему не хочется с js?
Это делается вот так:
https://learn.javascript.ru/mousemove-mouseover-mo...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы