Question

我不喜欢社交媒体＆＃34;喜欢＆＃34;按钮，所以我试图想出一种极简主义的方法，在我的页面上显示它们，使它们不会像我的网站设计那样具有侵入性。我遇到了网站jackthreads.com，并喜欢他们使用滑入/滑出鼠标悬停功能来显示他们的按钮。因此，毫不奇怪，我试图在我的网站上复制他们的想法。

基本上我每个主要社交媒体网络（Facebook，G +和Twitter）都有一个图标。当您将鼠标光标悬停在图标（即Facebook）上时，类似按钮将通过从左侧滑入来替换图标，从而使访问者有机会＆＃34;喜欢＆＃34;这页纸。当然，＆＃34;喜欢＆＃34;当鼠标光标离开悬停区域时，按钮将滑出视图。

好消息是，我认为它适用于Chrome，Safari和Firefox。不幸的是，IE让我很头疼。

以下是IE中发生的事情：

将光标悬停在图标上，类似按钮滑入视图
只要您将光标移动到单击＆＃34;如＆＃34;，菜单就会开始快速打开/折叠，最终按钮滑出视野。

TLDR：当鼠标光标悬停在菜单上时，我无法告诉IE保持菜单打开。

在我的网站上使用社交媒体并不是一个重要的优先事项，所以最初我尝试禁用所有IE浏览器的功能......但IE 11不支持浏览器检测标记。因此，经过一个小时的修改以使其在IE 11上运行之后，我认为我解决这个问题的最佳机会就是在这里问专家。

JSFiddle - 我冒昧地在jsfiddle上写了一个非常粗略的例子。当您将鼠标悬停在所有浏览器中的“赞”按钮上时，菜单将保持打开状态，IE除外：http://jsfiddle.net/V67Mt/3/

基本上，我使用CSS过渡来将按钮滑入和滑出DIV容器。我不确定解决方案是否涉及将jQuery与CSS3结合使用，或者是否可以单独使用CSS3，但无论哪种方式都适合我。

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;
}

由于

Answer 1

Jquery可以解决这个问题。只需添加几个悬停行为线

$("#facebook").hover(function() {
        $(this).addClass("active");
    },function(){
        $(this).removeClass("active");
    })

并更改：将hover属性更改为类。

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

example

在IE 11中，CSS扩展菜单在悬停时崩溃

1 个答案: