Quantcast

IE Edge svg hover issue

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

IE Edge svg hover issue

Tom Livingston
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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: IE Edge svg hover issue

Philippe Wittenbergh

> On Apr 6, 2017, at 1:47 AM, Tom Livingston <[hidden email]> wrote:
>
> Here is my structure and css:

<snip code>

> 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.


Is this what I should see?
https://dev.l-c-n.com/_junk/tl.html

(best guess, after trying to desassify the provided CSS)

If so, that works perfectly fine on this side with Edge supposedly up-to-date.


Philippe
--
Philippe Wittenbergh
https://l-c-n.com/






______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: IE Edge svg hover issue

Tom Livingston
Oh boy. Sorry about the sass.

I discovered that Edge needed a fixed width for the effect to work. I was
using calc. Percentage didn't work either.

Thanks for looking. When I can, I'll try to follow up with the working
sample.


On Wed, Apr 5, 2017 at 7:31 PM Philippe Wittenbergh <[hidden email]> wrote:

>
> > On Apr 6, 2017, at 1:47 AM, Tom Livingston <[hidden email]> wrote:
> >
> > Here is my structure and css:
>
> <snip code>
>
> > 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.
>
>
> Is this what I should see?
> https://dev.l-c-n.com/_junk/tl.html
>
> (best guess, after trying to desassify the provided CSS)
>
> If so, that works perfectly fine on this side with Edge supposedly
> up-to-date.
>
>
> Philippe
> --
> Philippe Wittenbergh
> https://l-c-n.com/
>
>
>
>
>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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/

--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
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/
Loading...