悬停时SVG图标边框颜色转换不起作用

Question

在这里我在下面提到了HTML和CSS。当用户单击箭头时，边框颜色应出现。就像此链接中的“圆圈”旋转按钮一样，我在下面添加了链接。我已经尝试过，但是我不知道代码中的错误是什么。例如，我添加了悬停属性，但是需要在用户单击应该显示的图标时喜欢它。

链接到代码：https://codepen.io/giana/pen/yYBpVY

 svg {
      background: none;
      border: 0;
      box-sizing: border-box;
      color: #f45e61;
      font-size: inherit;
      font-weight: 700;
      position: relative;
      vertical-align: middle;
      outline: none;
    }
    svg::before, svg::after {
      box-sizing: inherit;
      content: '';
      position: absolute;
    }
    .spin {
      width: 5em;
      height: 5em;
      padding: 0;
    }
    .a:hover {
      stroke: #0eb7da;
    }
    .a::before, .a::after {
      top: 0;
      left: 0;
    }
    .a::before {
      border: 2px solid transparent;
    }
    .a:hover::before {
      stroke: #0eb7da;
      stroke: #0eb7da;
      stroke: #0eb7da;
      transition: border-top-color 0.30s linear, border-right-color 0.30s linear 0.1s, border-bottom-color 0.30s linear 0.2s;
    }
    .a::after {
      border: 0 solid transparent;
    }
    .a:hover::after {
      stroke: 2px solid #0eb7da;
      border-left-width: 2px;
      border-right-width: 2px;
      -webkit-transform: rotate(270deg);
              transform: rotate(270deg);
      transition: border-left-width 0s linear 0.3ms, -webkit-transform 0.4ms linear 0ms;
      transition: transform 0.4ms linear 0ms, border-left-width 0ms linear 0.35ms;
      transition: transform 0.4ms linear 0ms, border-left-width 0s linear 0.35ms, -webkit-transform 0.4s linear 0s;
    }

    .circle {
      border-radius: 100%;
      box-shadow: none;
    }
    .circle::before, .circle::after {
      border-radius: 100%;
    }

    <a class="carousel-control-next" href="#" role="button" data-slide="next">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"
            viewBox="0 0 48 48">
            <defs>
              <style>
                .a {
                  fill: #fff;
                  stroke-width: 4px;
                }

                .b {
                  fill: #212121;
                  stroke: #212121;
                }

                .c {
                  stroke: none;
                }

                .d {
                  fill: none;
                }

                .e {
                  filter: url(#a);
                }
              </style>
              <filter id="a" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse">
                <feOffset dy="3" input="SourceAlpha" />
                <feGaussianBlur stdDeviation="3" result="b" />
                <feFlood flood-opacity="0.161" />
                <feComposite operator="in" in2="b" />
                <feComposite in="SourceGraphic" />
              </filter>
            </defs>
            <g transform="translate(-1229 -37)">
              <g class="e" transform="matrix(1, 0, 0, 1, 1229, 37)">
                <g class="a" transform="translate(9 6)">
                  <circle class="c" cx="15" cy="15" r="15" />
                  <circle class="d" cx="15" cy="15" r="13" />
                </g>
              </g>
              <path class="b" d="M4,8.375h7.606L8.113,4.881,9,4l5,5L9,14l-.881-.881,3.487-3.494H4Z"
                transform="translate(1244 49)" />
            </g>
          </svg>
        </a>