2014-04-24 308 views
0

我有一個按鈕懸停效果,當你懸停按鈕另一個div容器的寬度:0擴大到寬度:150px;IE10懸停效果不起作用

//hidden element 
.twitter-options-wrapper { 
    width: 0; 
    position: absolute; 
    overflow: hidden; 
    top: -58px; 
    right: 100%; 
    -webkit-transition: width 250ms ease-in-out; 
    -moz-transition: width 250ms ease-in-out; 
    -o-transition: width 250ms ease-in-out; 
    -ms-transition: width 250ms ease-in-out; 
    transition: width 250ms ease-in-out; 
} 

那麼,*我的情況下,使用薩斯懸停你想知道的一切,除了IE9嵌套

.btn-twitter-options:hover { 
    .twitter-options-wrapper { 
    width: 150px; 
    } 
} 

這項工作 - 10這是沒有意義的,因爲我有一個另一個按鈕懸停效果和工作正常,唯一的區別是這個按鈕擴大其懸停寬度從30 - 40px。

爲IE 9任何意見或黑客或10

感謝

+2

請提供樣品展示請這樣我們就可以得到一個清晰的畫面。 –

+0

這裏你去http://codepen.io/anon/pen/cHmDi –

回答

0

所以我找到了答案,並且css轉換可以在IE 9及更高版本上工作。問題與在絕對位置的容器內部具有options-wrapper有關,所以動畫發生在實際按鈕內部,解決方案是就像添加overflow:visible一樣簡單;對於實際的按鈕(.btn-twitter-options),這完全解決了這個問題。我在IE9中遇到類似的問題,其中一個按鈕帶有由css使用僞元素nt沒有在IE上顯示。解決方案是相同的,應用溢出:按鈕可見,並且:before元素將按預期顯示。

0

相關overflow: hidden的問題應通過加來解決:

-ms-overflow-style: auto;