重置css屬性：hover

我正在使用svg將堆棧溢出的徽標嵌入到我的簡歷中。 svg xml包含徽標的填充顏色。重置css屬性：hover

下面是SVG內容

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 64 64" id="svg3715"> 
<defs id="defs3717"/> 
<g id="layer1"> 
<path d="m 9.3049611,36.847632 4.4013079,0.04316 -0.153442,19.598393 29.291259,0 0,-19.527506 4.637782,0 0,24.287331 -38.2006795,0 0.023777,-24.401371 z" id="path2830" fill="#919191" style="fill-opacity:1;stroke:none"/> 
<rect width="22.944817" height="4.881876" x="16.481951" y="48.434078" id="rect3604" fill="#919191" style="fill-opacity:1;stroke:none"/> 
<rect width="23.066864" height="5.0039229" x="20.749949" y="37.830307" transform="matrix(0.9953749,0.09606666,-0.09606666,0.9953749,0,0)" id="rect3606" fill="#A78B68" style="fill-opacity:1;stroke:none"/> 
<rect width="23.066864" height="5.0039229" x="26.472515" y="23.401554" transform="matrix(0.96240291,0.27162592,-0.27162592,0.96240291,0,0)" id="rect3606-1" fill="#c19653" style="fill-opacity:1;stroke:none"/> 
<rect width="23.066864" height="5.0039229" x="30.528769" y="3.1535864" transform="matrix(0.85597805,0.51701216,-0.51701216,0.85597805,0,0)" id="rect3606-1-3" fill="#D48C28" style="fill-opacity:1;stroke:none"/> 
<rect width="23.066864" height="5.0039229" x="27.191883" y="-24.475019" transform="matrix(0.58242689,0.81288309,-0.81288309,0.58242689,0,0)" id="rect3606-1-3-7" fill="#FE8908" style="fill-opacity:1;stroke:none"/> 
<rect width="23.066864" height="5.0039229" x="11.174569" y="-50.183693" transform="matrix(0.16480989,0.98632535,-0.98632535,0.16480989,0,0)" id="rect3606-1-3-7-6" fill="#FF7A15" style="fill-opacity:1;stroke:none"/> 
</g> 
</svg>

我可以設置標誌爲黑色（我希望它看起來像正常狀態），使用

rect, path 
{ 
    fill: black; 
}

但現在，我能去刪除屬性:hover，爲了讓徽標找回它的亮度？

我試圖看fill參數documentation。但我沒有找到任何幫助。

來源

2013-04-14 tomahh

你怎麼通過移除屬性意味着：http://keith-wood.name/svg.html#dom

而CSS - 然而，這可以通過使用這個插件來補救？你可以設置填充爲零:)我也不理解關於「[...]找回它的亮度」的部分 – Terry

試過'rect：hover，path：hover {fill：none; ''？ –

我想我知道OP的含義 - 他希望標誌顏色在懸停後返回。 – Terry

這是可能的 - 只需在CSS中使用:not()選擇器即可。有些瀏覽器可能不支持它，但：

svg:not(:hover) rect, 
svg:not(:hover) path { 
    fill: black; 
}

在這裏看到的小提琴 - http://jsfiddle.net/teddyrised/qvV8Q/

[編輯]：爲了完整起見 - 如果您想添加對不支持:not()選擇瀏覽器的兼容性，您只需撥動一個.hover類和風格相應：

$(document).ready(function() { 
    $("svg").hover(function() { 
     $(this).attr("class", "hover"); 
    }, function() { 
     $(this).attr("class", ""); 
    }); 
});

注意：爲什麼使用.attr()的原因是是導致add/removeClass方法本身不能與<svg>元素一起使用。

.hover rect, .hover path { 
    fill: black; 
}

的JS供電的替代，可以看這裏 - http://jsfiddle.net/teddyrised/LTRCB/

來源

2013-04-14 20:24:26 Terry

哇，這太棒了。非常感謝你。 – tomahh

重置css屬性：hover

回答

相關問題