0
アクティブな状態で特定の色に塗りつぶされないsvg要素があります。私はオンラインでサンプルを探してみましたが、テーマに関連するものはほとんど見つかりませんでした。オンラインのものの多くはSVGのホバー状態に関連していますが、その方法を試しましたが、何らかの理由で自分のSVGをターゲットできません。SVGアイコンがアクティブなときに色を塗りつぶさない
アクティブな状態は、要素の背景とタイポグラフィで正常に動作しますが、私のSVGをターゲットにしません。
不明な点がある場合は、教えてください。多くの感謝！
私はあなたがhere
私はより良い可視性のためにここにコードを配置しますが、私は同じくらい私がそこにいる他の要素に起因する可能性があり、したくなかったようなコードを簡素化でした見つけることができますフィドルを作成誰かを混乱させる。
マイHTML：
<div id="contact">
<div class="contact_Me">
<div id="contact_Phone3_Wrapper_mb">
<a href="tel:+xxxxxxxxxxx">
<h3 class="contact_Me_Line_mb">
<div class="contact_Box_Svg_1_mb">
<svg version="1.1" id="phone" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="15px" height="15px" viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
<path id="call" opacity="0.4" fill="#444444" d="M12.965,0.042H2.994c-0.61,0-1.108,0.499-1.108,1.108v12.741
c0,0.609,0.499,1.108,1.108,1.108h9.971c0.61,0,1.11-0.499,1.11-1.108V1.15C14.073,0.541,13.575,0.042,12.965,0.042 M7.979,14.818
c-0.359,0-0.65-0.291-0.65-0.65c0-0.357,0.292-0.65,0.65-0.65c0.36,0,0.651,0.293,0.651,0.65
C8.631,14.527,8.339,14.818,7.979,14.818 M12.411,13.337H3.563H3.548V1.704h8.863V13.337z"/>
</svg>
</div>
<span class="contact_Small_Caps_mb">call:</span>
<span id="contact_Phone_mb">+XX XXX XXX XX XX</span>
</h3>
</a>
</div>
</div>
マイCSS：
#contact_mb {
width: 100%;
height: 1000px;
background: white;
margin-top: 30em;
padding-top: 2em;
background: #e7e7e7;
}
#contact_Phone3_Wrapper_mb {
display: block;
margin: 0 auto;
width: 90%;
height: 60px;
margin-bottom: .3em;
background-color: rgba(249,249,249,.3);
border: 1px solid #e2e2e2;
}
#contact_Phone3_Wrapper_mb:active {
background-color: yellow;
}
#contact_Phone3_Wrapper_mb:active h3, #contact_Phone3_Wrapper_mb:active .contact_Small_Caps_mb {
color: #262626;
}
#contact_Phone3_Wrapper_mb:active #call {
fill: #262626;
}
.contact_Me_Line_mb {
color: rgba(68,68,68,.4);
text-align: left;
line-height: 1em;
padding-left: 0em;
}
.contact_Box_Svg_1_mb {
float: left;
width: 15px;
height: 15px;
margin-top: 4px;
margin-left: 14px;
margin-right: 12px;
}
.contact_Small_Caps_mb {
font-variant: small-caps;
font-family: times;
font-size: .8em;
margin-right: 4px;
color: rgba(68,68,68,.2);
}
#contact_Phone_mb {
font-family: arial;
font-size: .7em;
}