javascript - 输入聚焦时尝试更改 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>当聚焦前面的输入时。

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

#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 {
  float: right;
  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;
}

.amount-input:focus + #oc-symbol .symbol-text {
  fill: #3c93ae;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="current-amount-div">
  <input class="amount-input" type="number" />
  <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>
</div>