Question

我对按钮有悬停效果，当你将按钮悬停在另一个宽度为0的div容器时：0扩展为宽度：150px;

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

然后，悬停*我使用Sass以防你想知道嵌套

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

这项工作除了IE9 - 10之外没什么意义，因为我有另一个带有悬停效果的按钮并且工作正常，唯一的区别是这个按钮在悬停时将其宽度从30 - 40px扩展。

IE 9或10的任何想法或黑客。

由于

Answer 1

您确定要在IE9中使用css transitions吗？根据：I need CSS3 transition to work in IE9 IE9不理解transitions ...... :(还有一个黑客如何使用JS动画它。

IE10明智 - 我刚刚在http://www.browserstack.com/上测试了它并且动画确实有效。

Answer 2

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

Answer 3

与overflow: hidden相关的问题应通过添加以下内容来解决：

-ms-overflow-style: auto;

IE10悬停效果不起作用

3 个答案: