Попытка изменить цвет заливки svg при фокусировке ввода

У меня есть значок 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>
971   3  

3 ответов:

Ваша текущая структура 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>
1  
2016-11-10 08:16:24

Использование Скрипта

Добавьте еще один класс SvGFocusColor. и этот класс добавить только фокус в текстовом поле затем применить и удалить фокус затем удалить класс 'SvGFocusColor' 

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

});

Css 

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

Живая Демонстрация Здесь

Пример Фрагмента Ниже 

    $('.amount-input').focus(function () {
         $('.symbol-text').addClass('SvGFocusColor');
    }).blur(function () 
    {
      $('.symbol-text').removeClass('SvGFocusColor');
      
    });
#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;
    }
<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>
1  
2016-11-10 08:48:10

Вам действительно не нужен конкретный 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>

Надеюсь, это поможет!

1  
2016-11-10 08:58:39

Comments

    Ничего не найдено.
Click here to cancel reply.