Задать вопрос
@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 при неявной наводке?
  • Вопрос задан
  • 127 просмотров
2 комментария
Подписаться 1 Средний 2 комментария
Решения вопроса 1
Fragster
@Fragster
помогло? отметь решением!
Сделать один SVG нулевой высоты, в него добавить symbol и его уже использовать в двух других svg
правда придется использовать для fill currentColor или var()
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Несложная верстка из Figma bootstrap5 scss npm
18 дек. 2024, в 04:59
1000 руб./в час
Отправка команды на открытие всех окон автомобиля Chery Tiggo 7 Pro
18 дек. 2024, в 03:28
16000 руб./за проект
Установить музыкальный софт
18 дек. 2024, в 01:04
5000 руб./за проект
Ещё заказы