Задать вопрос
@AlTerminator
css

Как сделать так, чтобы при наведении курсора на один svg не срабатывало наведение на другой svg?

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
      <svg id="SvgArrow" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M294 66H218C211.373 66 206 71.3726 206 78V106.319C206 117.01 193.074 122.364 185.515 114.804L165.49 94.7797C160.804 90.0934 153.206 90.0934 148.52 94.7797L94.7797 148.52C90.0934 153.206 90.0934 160.804 94.7797 165.49L114.804 185.515C122.364 193.074 117.01 206 106.319 206H78C71.3726 206 66 211.373 66 218V294C66 300.627 71.3726 306 78 306H106.319C117.01 306 122.364 318.926 114.804 326.485L94.7797 346.51C90.0934 351.196 90.0934 358.794 94.7797 363.48L148.52 417.22C153.206 421.907 160.804 421.907 165.49 417.22L185.515 397.196C193.074 389.636 206 394.99 206 405.681V434C206 440.627 211.373 446 218 446H294C300.627 446 306 440.627 306 434V405.681C306 394.99 318.926 389.636 326.485 397.196L346.51 417.22C351.196 421.907 358.794 421.907 363.48 417.22L417.22 363.48C421.907 358.794 421.907 351.196 417.22 346.51L397.196 326.485C389.636 318.926 394.99 306 405.681 306H434C440.627 306 446 300.627 446 294V218C446 211.373 440.627 206 434 206H405.681C394.99 206 389.636 193.074 397.196 185.515L417.22 165.49C421.907 160.804 421.907 153.206 417.22 148.52L363.48 94.7797C358.794 90.0934 351.196 90.0934 346.51 94.7797L326.485 114.804C318.926 122.364 306 117.01 306 106.319V78C306 71.3726 300.627 66 294 66Z" stroke="green" stroke-width="24"/>
      <circle cx="256.5" cy="255.5" r="102.5" stroke="green" stroke-width="24"/>
      <path d="M256 207V305M256 305L226 275M256 305L286 275" stroke="red" stroke-width="24" stroke-linecap="round"/>
     </svg>
     <svg><use xlink:href="#SvgArrow"/></svg>
</body>
</html>


CSS:
#SvgArrow:hover{
 fill: red;
}


Проблема в том, что наведении курсора на svg с id="SvgArrow", срабатывает псевдокласс hover и на svg, указанном через use. Как сделать так, чтобы на svg, заданном через use, не срабатывал hover при неявной наводке?
  • Вопрос задан
  • 117 просмотров
2 комментария
Подписаться 1 Средний 2 комментария
Решения вопроса 1
Fragster
@Fragster
помогло? отметь решением!
Сделать один SVG нулевой высоты, в него добавить symbol и его уже использовать в двух других svg
правда придется использовать для fill currentColor или var()
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Web-программист (Bitrix) / PHP, CSS, JS (Fullstack)
VIARDA
от 60 000 до 150 000 ₽
Программист PHP
Инскайнет
До 15 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Добавить шапку в корзину интернет-магазина на сайте zimnie com
18 июн. 2024, в 16:06
1500 руб./в час
Разработать ML модуль
18 июн. 2024, в 15:56
10000 руб./за проект
Разработать дизайна продающего сайта новой HR-системы
18 июн. 2024, в 15:47
100000 руб./за проект
Ещё заказы