SVG图标在活动状态下不会填充颜色

我有一个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; 
}

来源

2016-12-30 user5434403

它的工作，但颜色不是真的来过，因为SVG有0.4的不透明度。

因此，将opacity: 1添加到#call SVG的活动状态。

#contact_Phone3_Wrapper_mb:active #call { 
    fill: #262626; 
    opacity: 1; 
}

JSFiddle

来源

2016-12-30 15:11:34 Goombah

SVG图标在活动状态下不会填充颜色

回答

相关问题