IE10悬停效果不起作用

我有一个按钮悬停效果，当你悬停按钮另一个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

感谢

来源

2014-04-24 Israel Bautista

请提供样品展示请这样我们就可以得到一个清晰的画面。 –

这里你去http://codepen.io/anon/pen/cHmDi –

您确定要在IE9 css transitions？据：I need CSS3 transition to work in IE9 IE9不明白transitions ... :(还有一个黑客如何利用JS来制作动画

IE10明智的 - 我刚刚测试了http://www.browserstack.com/和动画做的工作

。

来源

2014-04-25 12:44:21 neciu

所以我找到了答案，并且css转换可以在IE 9及更高版本上工作。问题与在绝对位置的容器内部具有options-wrapper有关，所以动画发生在实际按钮内部，解决方案是就像添加overflow：visible一样简单;对于实际的按钮（.btn-twitter-options），这完全解决了这个问题。我在IE9中遇到类似的问题，其中一个按钮带有由css使用伪元素nt没有在IE上显示。解决方案是相同的，应用溢出：按钮可见，并且：before元素将按预期显示。

来源

2014-04-26 18:00:10

相关overflow: hidden的问题应通过加来解决：

-ms-overflow-style: auto;

来源

2017-02-21 15:47:24 Matox

IE10悬停效果不起作用

回答

相关问题