jquery - CSS expanding menu collapses on hover in IE 11 -

jquery - CSS expanding menu collapses on hover in IE 11 -

i'm not fond of social media "like" buttons, i'm trying come minimalist approach of displaying them on pages in way not intrusive , flow site's design. came across website jackthreads.com , liked way utilize slide-in/slide-out mouseover feature display buttons. so, not surprisingly, i'm trying replicate thought on site.

basically have icon each major social media network (facebook, g+, , twitter). when hover mouse cursor on icon (i.e. facebook), button replace icon sliding in left, giving visitor chance "like" page. naturally, "like" button slide out of view when mouse cursor moves away hover area.

the news is, have working chrome, safari, , firefox. unfortunately ie giving me headache.

here's happens in ie:

you hover cursor on icon , button slides view as move cursor click "like", menu starts open/collapse rapidly , button slides out of view.

tldr: can't tell ie maintain menu open when mouse cursor on it.

having social media on site isn't huge priority, tried disabling feature ie browsers...but ie 11 doesn't back upwards browser detection tags. after hr of tinkering code work on ie 11, figured best chance of solving issue inquire experts here.

jsfiddle - took liberty of writing rough illustration on jsfiddle. menu remain open when hover on button in browsers, except ie: http://jsfiddle.net/v67mt/3/

basically, i'm using css transitions slide buttons in , out of div containers. i'm not sure if solution involves using jquery in combination css3 or if can done solely css3, whatever works fine me.

html

<div id="social_media"> <ul> <li id="facebook"> <div id="facebook_like"> <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"> </div> </div> </li> </ul> </div> <!-- facebook code--> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getelementsbytagname(s)[0]; if (d.getelementbyid(id)) return; js = d.createelement(s); js.id = id; js.src = "//connect.facebook.net/en_us/sdk.js#xfbml=1&version=v2.0"; fjs.parentnode.insertbefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

css

#social_media{ display:inline-block; background-color:#c0c0c0; float:left; text-align:left; color:#000; } #social_media li{ list-style:none; display:inline-block; } #facebook { display:block; width:60px; height:20px; -webkit-transition: width 1s, background-image 1s ease-out; -moz-transition:width 1s, background-image 1s ease-out; -ms-transition:width 1s, background-image 1s ease-out; -o-transition:width 1s, background-image 1s ease-out; transition:width 1s, background-image 1s ease-out; position:relative; overflow:hidden; } #facebook:after{ content: "test"; padding-left:12px; } #facebook:hover{ width:100px; } #facebook:hover #facebook_like{ margin-left:10px; width:100px; display:inline-block; overflow:visible; } #facebook_like{ display:inline-block; margin-left:-100px; -webkit-transition: margin-left 1s; -moz-transition:margin-left 1s; -ms-transition:margin-left 1s; -o-transition:margin-left 1s; transition:margin-left 1s; }

thanks

jquery can sort out. adding couple of hovering behaviour lines

$("#facebook").hover(function() { $(this).addclass("active"); },function(){ $(this).removeclass("active"); })

and changing :hover property class.

#facebook.active{ width:100px; } #facebook.active #facebook_like{ margin-left:10px; width:100px; }

example

jquery html css css3 internet-explorer-11