при наведении на один div загорается другой соответствующий - PullRequest
Новая
       0

при наведении на один div загорается другой соответствующий

0 голосов
/ 26 февраля 2020

У меня есть svg пути, показывающие статистику о буквах az.
У меня есть соответствующие div с самой буквой.
Каждый div должен раскрашивать соответствующий путь svg при наведении.
Можно ли использовать только CSS определить отношение кораблей?
Я имею в виду, не то, где у меня есть 26 определений в css, описывающих отношения каждого div

logi c вроде 

div.a has been hovered, colorize path.a
div.b has been hovered, colorize path.b
...

На данный момент у меня есть вот что. 

<body>
  <svg height="210" width="400">
    <path class="U" d="M 0 300 L 200 0 L 400 400" />
    <path class="T" d="M 0 400 L 200 0 L 400 150" />
    <!-- ... -->
  </svg>
</body>

Я пытаюсь найти решение для div, надеясь, что это не понадобится JS

1 Ответ

0 голосов
/ 27 февраля 2020

Простой ответ на этот вопрос заключается в том, что это возможно только в том случае, если div содержит path. Примерно так, например: 

/* HTML */
<div class="example-div">
    <svg class="example-svg" height="210" width="400">
        <path class="U" d="M 0 300 L 200 0 L 400 400" />
        <path class="T" d="M 0 400 L 200 0 L 400 150" />
    </svg>
</div>

/* CSS */
.example-div {
    fill: white;
}

.example-div:hover {
    fill: black;
}

.example-svg path {
    fill: inherit;
}

Если div не содержит path, то, что касается CSS, он не знает об этом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...