Question

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

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

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

＆＃13;

$(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'
    });
  }*/
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

使用脚本

再添加一个班级SvGFocusColor。此类只在文本框中添加焦点然后应用并删除焦点然后删除类`SvGFocusColor＆＃39;

$('.amount-input').focus(function () {
     $('.symbol-text').addClass('SvGFocusColor');
}).blur(function () 
{
  $('.symbol-text').removeClass('SvGFocusColor');

});

<强>的CSS

.SvGFocusColor
    { 
    fill: #3c93ae !important;
    }

现场演示 Here

下面的代码段示例

＆＃13;

    $('.amount-input').focus(function () {
         $('.symbol-text').addClass('SvGFocusColor');
    }).blur(function () 
    {
      $('.symbol-text').removeClass('SvGFocusColor');
      
    });

＆＃13;

#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;
}
.SvGFocusColor
    { 
    fill: #3c93ae !important;
    }

＆＃13;

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

＆＃13;

Answer 2

您当前的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>很专注。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 3

你真的不需要特定的Javascript来实现它，你可以使用CSS，就像：

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

请查看下面的代码段：

$(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 {
  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/2.1.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>

希望这有帮助！

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

3 个答案: