CSS：hover选择器在单击其他svg元素时不起作用，但最初可以工作

Question

所以我在代码中为svg圆添加了一个悬停选择器（您可以在底部找到codepen链接），它也可以工作，但是一旦您单击一个圆，然后当您单击某个圆时，它就会停止工作将鼠标悬停在其他圈子上，没有任何悬停样式，谢谢您！

HTML：

<div class="names">

                <svg class="responsive-svg" xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="0 0 269 842.89">
                    <g class="name-circle" id="1">
                        <circle id="circleFirst" vector-effect="non-scaling-stroke" cx="134" cy="134" r="134" fill="#F7931E"
                            stroke="#F29C46" stroke-linecap="square" stroke-miterlimit="3" />
                        <text id="firstText" transform="translate(68 150.759)" font-family="Raleway" font-weight="400"
                            font-size="40" fill="#fff">
                            Some text
                        </text>
                    </g>

                    <g class="name-circle" id="2">
                        <circle id="circleSecond" vector-effect="non-scaling-stroke" cx="134" cy="420.945" r="134" fill="#F29C46"
                            stroke="#F29C46" stroke-linecap="square" stroke-miterlimit="3" />
                        <text id="secondText" transform="translate(40 435.704)" font-family="Raleway" font-weight="400"
                            font-size="40" fill="#fff">
                            More text
                        </text>
                    </g>

                    <g class="name-circle" id="3">
                        <circle id="circleThird" vector-effect="non-scaling-stroke" cx="134" cy="707.89" r="134" fill="#F29C46"
                            stroke="#F29C46" stroke-linecap="square" stroke-miterlimit="3" />
                        <text id="thirdText" transform="translate(40 725.649)" font-family="Raleway" font-weight="400"
                            font-size="40" fill="#fff">
                            even more text
                        </text>
                    </g>



                </svg>


            </div>

CSS：

html,body{
  padding:0;
  margin:0;
  height:100%;
  width:100%;
}


.names {
  box-sizing: border-box;
  position: relative;
  z-index: 3;
  height: 100%;
  width: 20%;
  left: 0;
  display: flex;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.name-circle:hover circle{
  fill:none;
  stroke:red;
}

.name-circle:hover text{
  fill:black;
}

Javascript：

$(".name-circle").click(function() {
    var value = $(this).attr("id");
    if (value == 1) {
      $("#circleFirst").css("stroke", "#20ed86");
      $("#circleFirst").css("fill", "white");
      $("#firstText").css("fill", "black");


    $("#circleSecond").css("stroke", "none");
    $("#circleSecond").css("fill", "#F29C46");
    $("#secondText").css("fill", "white");


    $("#circleThird").css("stroke", "none");
    $("#circleThird").css("fill", "#F29C46");
    $("#thirdText").css("fill", "white");


      $(".woodflake-content").css("display", "none");
      $(".we3dx-content").css("display", "block");
      $(".other-content-1").css("display", "none");
      $(".other-content-2").css("display", "none");


    } else if (value == 2) {

      $("#circleSecond").css("stroke", "#20ed86");
      $("#circleSecond").css("fill", "white");
      $("#secondText").css("fill", "black");


    $("#circleFirst").css("stroke", "none");
    $("#circleFirst").css("fill", "#F7931E");
    $("#firstText").css("fill", "white");

    $("#circleThird").css("stroke", "none");
    $("#circleThird").css("fill", "#F29C46");
    $("#thirdText").css("fill", "white");


      $(".woodflake-content").css("display", "none");
      $(".we3dx-content").css("display", "none");
      $(".other-content-1").css("display", "block");
      $(".other-content-2").css("display", "none");

    } else if (value == 3) {
      $("#circleThird").css("stroke", "#20ed86");
      $("#circleThird").css("fill", "white");
      $("#thirdText").css("fill", "black");


    $("#circleSecond").css("stroke", "none");
    $("#circleSecond").css("fill", "#F29C46");
    $("#secondText").css("fill", "white");

    $("#circleFirst").css("stroke", "none");
    $("#circleFirst").css("fill", "#F7931E");
    $("#firstText").css("fill", "white");


      $(".woodflake-content").css("display", "none");
      $(".we3dx-content").css("display", "none");
      $(".other-content-1").css("display", "none");
      $(".other-content-2").css("display", "block");
    } 
  });

https://codepen.io/goprime/pen/MPKPNQ