html - img - Restablecer una propiedad css en: hover

svg animation mouse over

Question

Estoy usando svg para insertar el logotipo de overflow de pila en mi currículum. El svg xml contiene el color de relleno del logotipo.

Aquí está el contenido 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>

Puedo configurar el logotipo para que sea negro (lo que quiero que se vea en estado normal) usando

rect, path
{
fill: black;
}

Pero ahora, ¿qué puedo hacer para eliminar la propiedad en :hover , para que el logotipo recupere su brillo?

Traté de ver la documentación de los parámetros de fill . Pero no encontré nada que me ayudara.

Answer 1

Es posible: simplemente use el selector :not() en CSS. Algunos navegadores pueden no admitirlo:

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

Ver violín aquí - http://jsfiddle.net/teddyrised/qvV8Q/

[Editar]: en aras de la exhaustividad: si desea agregar compatibilidad para los navegadores que no admiten el selector :not() , simplemente .hover desactive una clase y estilo de .hover :

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

Nota : El motivo por el cual se utiliza .attr() es porque el método add / removeClass no funciona con elementos de <svg> forma nativa. Sin embargo, esto se puede remediar utilizando este complemento - http://keith-wood.name/svg.html#dom

Y el CSS:

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

La alternativa de JS-powered se puede ver aquí - http://jsfiddle.net/teddyrised/LTRCB/