1

Как изменить стиль css, svg элемента при наведении мыши на другой svg элемент?

<!DOCTYPE html>
<html>
<style>
  #c1:hover #c2 {
    fill: red;
  }
</style>

<body>

  <svg width="500" height="500">
    <circle id="c1" cx="150" cy="150" r="80"
    stroke="green" stroke-width="4" fill="yellow" />
  
    <circle id="c2" cx="350" cy="350" r="80"
    stroke="green" stroke-width="4" fill="yellow" />

    </svg>

</body>

</html>

1 ответ 1

2

Вы забыли добавить необходимый селектор +:

<!DOCTYPE html>
<html>
<style>
  #c1:hover + #c2 {
    fill: red;
  }
</style>

<body>
  <svg width="500" height="500">
    <circle id="c1" cx="150" cy="150" r="80" stroke="green" stroke-width="4" fill="yellow" />
    <circle id="c2" cx="350" cy="350" r="80" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</body>

</html>

Рекомендуется тщательнее продумывать разметку и использовать соответствующие селекторы:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    svg {
      height: 100vh;
    }
    
    #c1 {
      cursor: pointer;
      fill: blue;
    }
    
    #ab {
      transition: 300ms;
      cursor: pointer;
      stroke: #491EC4;
      stroke-width: 3;
    }
    
    #toab {
      transition: 300ms;
      cursor: pointer;
      fill: blue;
    }
    
    #c1:hover~#ab {
      stroke: #008000;
    }
    
    #toab:hover~#ab {
      stroke: #008000;
    }
    
    #ab:hover {
      stroke: #cb0412;
    }
  </style>

</head>

<body>
  <div class="f1">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 700 700" height="100vh">
      <circle  id="c1" cx="300" cy="100" r="20"  />
      <text id="toab" x="50" y="80"> AB </text>
      <line id="ab" x1="50" y1="50" x2="400" y2="50" />
    </svg>
  </div>
</body>

</html>

6
  • Да, работает. Спасибо. Имеет ли значение очередность инициализации svg элементов и стилей элементов в <style> ? 15 фев 2021 в 15:56
  • @СебастианПереира: не совсем понял вопрос. Но, если Вы про то, где размещать <style>, то в данном случае значения не имеет. Если же Вы имеете в виду расположение каких-либо элементов в разметке, то да, это критично, и стили будут напрямую зависеть от этого.
    – UModeL
    15 фев 2021 в 16:18
  • Вот еще вопрос: а почему если я хочу чтобы при на наведении на разные элементы менялся стиль SVG третьего элемента (линии) - этого не происходит? 15 фев 2021 в 16:49
  • И еще не понял как здесь вставить код в комментарий к ответам. 15 фев 2021 в 16:57
  • @СебастианПереира: дополнил ответ. Пожалуйста, посетите данную страницу - это азы CSS.
    – UModeL
    15 фев 2021 в 17:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.