Here is my structure and css:
<ul role="navigation" class="navbar active clear">
<li class="active">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 100 100">
<style>
.st0{fill:#afafaf;}
</style>
<path d="M77.6 17.6H3.5c-1.9 0-3.5 1.5-3.5 3.5v57.8c0 1.9 1.5 3.5 3.5
3.5h74.1c1.9 0 3.5-1.5 3.5-3.5V62.2L94 75c.7.7 1.5 1 2.5 1 .4 0 .9-.1
1.4-.3 1.3-.5 2.2-1.8
2.2-3.3v-45c0-1.4-.9-2.7-2.2-3.3-1.3-.5-2.8-.3-3.8.8L81.2
37.7V21.1c0-2-1.6-3.5-3.6-3.5zm-3.5
28.6v29.3H7v-51h67.1v21.7zm18.8-10.3v28.3L81.2 52.4v-4.6l11.7-11.9z"
class="st0"/>
<g>
<path d="M100 29.8l-16.5 9.5v-19c-.1-2-1.7-3.6-3.7-3.6H3.6c-1.9 0-3.6
1.6-3.6 3.6v59.4c0 1.9 1.6 3.6 3.6 3.6h76.1c1.9 0 3.6-1.6 3.6-3.6V57.3l16.6
9.5v-37zM76.1 46.1v30.1h-69V23.8h69v22.3z" class="st0"/>
</g>
</svg>
</a>
</li>
</ul>
.navbar{
display: block;
position: relative;
list-style-type: none;
padding: 0;
margin: 0;
//width: 52%;
max-width: 225px;
li{
position: relative;
background: linear-gradient(50deg, #bb3607 0%, #be6407 100%);
width: calc(100% / 3);
height: auto;
max-height: 75px;
float: left;
z-index: 1;
svg{
display: block;
position: relative;
width: 100%;
height: auto;
max-height: 55px;
max-width: 100%;
z-index: 2;
}
a{
position: relative;
display: block;
padding: 11px;
z-index: 2;
svg .st0{
fill: #afafaf!important;
will-change: transform;
transition: all 0.5s ease;
}
}
}
li:before{
position: absolute;
background: linear-gradient(45deg, #cccccc 0%, #ffffff 100%);
content: " ";
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
z-index: 1;
will-change: transform;
transition: all 0.5s ease;
}
li.active:before,
li:hover:before{
opacity: 0;
}
li.active a,
li:hover a {
svg .st0{
fill: #ffffff!important;
}
}
}
In Edge, on hover the svg disappears when you move your cursor off the
element.
Anyone see why or know what's up? I've been messing around with style
changes, but can't see what Edge is doing. I'm sorry I can't provide a
link. I'll take any guesses at this point.
TIA
--
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
