IE10 悬停效果不起作用答案

【问题标题】：IE10 hover effect not workingIE10 悬停效果不起作用
【发布时间】：2014-06-10 00:08:16
【问题描述】：

我在一个按钮上有一个悬停效果，当你悬停按钮时，另一个宽度为 0 的 div 容器扩展为宽度：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 扩展到 40 像素。

关于 IE 9 或 10 的任何想法或技巧。

谢谢

【问题讨论】：

请提供样例演示，以便我们得到清晰的图片。
给你codepen.io/anon/pen/cHmDi

标签： css hover sass internet-explorer-9 internet-explorer-10

【解决方案1】：

您确定要在 IE9 中使用 css transitions 吗？根据：I need CSS3 transition to work in IE9 IE9 看不懂transitions... :( 还有一个 hack 如何使用 JS 对其进行动画处理。

IE10 明智的 - 我刚刚在 http://www.browserstack.com/ 上对其进行了测试，并且动画确实有效。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

-ms-overflow-style: auto;

【讨论】：