CSS展開式菜單在IE中懸停時崩潰11

我不喜歡社交媒體「喜歡」按鈕，所以我試圖想出一種極簡主義的方式，在他們的頁面上顯示他們的方式作爲我的網站設計的入侵和流動。我遇到了網站jackthreads.com，並且喜歡他們使用滑入/滑出鼠標懸停功能來顯示他們喜歡的按鈕的方式。所以，毫不奇怪，我試圖在我的網站上覆制他們的想法。CSS展開式菜單在IE中懸停時崩潰11

基本上我有一個每個主要社交媒體網絡（Facebook，G +和Twitter）的圖標。當您將鼠標光標懸停在圖標（即臉書）上時，類似的按鈕將從左側滑入圖標來替換圖標，使訪問者有機會「喜歡」該頁面。自然，當他們的鼠標光標離開懸停區域時，「Like」按鈕將滑出視圖。

好消息是，我對Chrome，Safari和Firefox都有完美的工作。不幸的是，IE讓我頭疼。

下面是在IE中會發生什麼：

您將光標懸停在圖標和類似按鈕滑入視圖
只要移動光標點擊「喜歡」，菜單開始快速打開/摺疊，最終按鈕滑出視野。

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

感謝

來源

2014-06-20 user1167727

這一個絆倒了我，但我不知道部分Facebook的iframe中是否干擾 - 這有點像按鈕是一個完全獨立的HTML文檔。 – Katana314

@ Katana314 - 解決方案也在逃避我。它對G +代碼做了同樣的事情，但是如果我使用自己的代碼（即創建自己的DIV），它就可以工作。我正在考慮花時間尋找阻止所有IE瀏覽器的方法，但這不是一個好的解決方案。 – user1167727

jQuery的可以排序了這一點。剛剛加入夫婦徘徊行爲系

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

的和不斷變化：懸停性能的一類。

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

example

來源

2014-06-23 14:40:52

謝謝它完美的作品！ – user1167727

CSS展開式菜單在IE中懸停時崩潰11

回答

相關問題