当输入被聚焦时，尝试改变svg的填充颜色
Trying to change fill color of svg when input is focused
在输入字段旁边有一个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>您当前的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>使用脚本
再添加一个类SvGFocusColor。这个类只在文本框中添加焦点然后应用并移除焦点然后移除类' SvGFocusColor'
$('.amount-input').focus(function () {
$('.symbol-text').addClass('SvGFocusColor');
}).blur(function ()
{
$('.symbol-text').removeClass('SvGFocusColor');
});
.SvGFocusColor
{
fill: #3c93ae !important;
}
Live Demo Here
代码片段示例
$('.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>你不需要特别的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>希望这对你有帮助!
相关文章：
- D3在一个调用中绘制不同的SVG形状，没有可见性
- 改变<svg>对象's路径
- svg改变颜色属性
- 使用JavaScript改变SVG路径的颜色(JS颜色库)
- 当输入被聚焦时，尝试改变svg的填充颜色
- 如何缩放所有的东西，除了一些路径/文本在svg画布上，而不改变其确切位置
- 在HTML5/JS中改变SVG圆圈的属性
- 如何改变viewBox来居中svg中的元素
- 添加一个DOM/SVG元素与d3 javascript库改变变量引用/范围，为什么
- 如何使用jQuery SVG来改变与变量的转换
- 如何改变SVG中元素的属性，当我鼠标悬停在第二个SVG的元素使用D3
- 当值改变时，Raphael US SVG地图不重新着色
- SVG移动方向改变
- 用动画改变svg的宽度
- jQuery改变SVG属性的问题
- 在鼠标悬停时改变SVG图像
- 动态地改变SVG动画值，同时使用fill=“;冻结”;
- 如何通过动画在Snap.svg中改变多边形的点
- 交互式SVG:将鼠标悬停在一部分上，改变另一部分的颜色
- 如何在悬停事件上改变SVG图像的笔画颜色
