输入聚焦时尝试更改 svg 的填充颜色

Question

我在输入字段旁边有一个 SVG 图标。当图标或输入被悬停时，两者都应该一起改变颜色，当点击任何一个时，输入应该被聚焦并且都应该保持悬停颜色。

我遇到的问题是当输入聚焦时 SVG 不会保持悬停颜色。我试过使用，if ($('.input').is(':focus'))但它让我倒退了一步，因为它以某种方式阻止了颜色即使在悬停时也会改变。

JSFiddle - 取消对 JS 的注释以检查我徒劳的尝试。谢谢。

$(document).ready(function() {
  $('#current-amount-div').click(function() {
    $('.amount-input').focus();
  });

  /*if ($('.amount-input').is(":focus")) {
    $('.symbol-text').css({
      fill: '#3c93ae'
    });
  } else {
    $('.symbol-text').css({
      fill: '#6ab5cc'
    });
  }*/
});

#current-amount-div {
  width: 163px;
  display: block;
  margin: auto;
  transition: color 0.25s, fill 0.25s ease-in-out;
}

#current-amount-div:hover .amount-input {
  border-color: #3c93ae;
}

#current-amount-div:hover #oc-symbol text {
  fill: #3c93ae;
}

#oc-symbol {
  float: left;
}

#oc-symbol text {
  transition: fill 0.25s ease-out;
}

.symbol-text {
  fill: #6ab5cc;
}

.amount-input {
  width: 120px;
  margin-left: 5px;
  margin-top: 17px;
  display: inline;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 2px solid #6ab5cc;
}

.amount-input:focus {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 2px solid #3c93ae;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="current-amount-div">
  <svg id="oc-symbol" width="36px" height="48px" viewBox="11.5 0 75 100" enable-background="new 11.5 0 75 100" xml:space="preserve">
    <g>
      <text class="symbol-text" transform="matrix(1 0 0 1 5.8066 87.1475)" font-family="'Apple-Chancery'" font-size="112.6105">C</text>
      <text class="symbol-text" transform="matrix(0.8797 0.0076 -0.0087 1 29.2212 72.208)" font-family="'AvenirNext-MediumItalic'" font-size="79.8022">o</text>
    </g>
  </svg>

  <input class="amount-input" type="number" />
</div>

Answer 1

您当前的HTML结构如下：

<div id="current-amount-div">
    <svg id="oc-symbol" width="36px" height="48px">
        <g>
            <text>C</text>
            <text>o</text>
        </g>
     </svg>
     <input class="amount-input" type="number" />
</div>

和<svg>之前一样<input>，它不能用纯 css 选择器来选择。但是，如果您切换两个元素的顺序，HTML如下所示：

<div id="current-amount-div">
    <input class="amount-input" type="number" />
    <svg id="oc-symbol" width="36px" height="48px">
        <g>
            <text>C</text>
            <text>o</text>
        </g>
     </svg>
 </div>

现在，我们可以<svg>使用同级选择器<input>来选择它并设置其样式，即当前面的输入获得焦点时将选择它。+input:focus + svg<svg>

<div id="current-amount-div">
    <svg id="oc-symbol" width="36px" height="48px">
        <g>
            <text>C</text>
            <text>o</text>
        </g>
     </svg>
     <input class="amount-input" type="number" />
</div>

<div id="current-amount-div">
    <input class="amount-input" type="number" />
    <svg id="oc-symbol" width="36px" height="48px">
        <g>
            <text>C</text>
            <text>o</text>
        </g>
     </svg>
 </div>

$(document).ready(function() {
  $('#current-amount-div').click(function() {
    $('.amount-input').focus();
  });
});