工具提示悬停时的过渡在 IE 上不起作用，在 Google Chrome 中运行良好

Question

我已经查看了有关过渡在 IE 上不起作用的相关帖子，但我无法弄清楚这个有什么问题。

[tooltip] {
 position: relative;
  margin: 100px;
}

/* Arrow */
[tooltip]:before {
 width: 16px;
 height: 6px;
 left: 50%;
 margin-top: 2px;
 top: calc(100% - 10px);
 content: '';
 position: absolute;
 z-index: 10;
 box-sizing: border-box;
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
 border-bottom: 10px solid #00204e;
 transform: translate(-50%, 0%);
 opacity: 0;
 -webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 -moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 -ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 -o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 pointer-events: none;
}

/* Text */
[tooltip]:after {
 transform: translate(-50%, 0%);
 left: 50%;
 margin-top: 11px;
 top: calc(100% - 10px);
 font-weight: normal;
 text-shadow: none;
 background: #00204e;
 border-radius: 4px;
 color: #fff;
 content: attr(tooltip);
 padding: 10px;
 position: absolute;
 white-space: normal;
 width: 150px;
 width: max-content;
 font-size: 10px;
 font-family: 'Helvetica Neue';
 line-height: normal;
 max-width: 150px;
 text-align: left;
 height: auto;
 display: inline-block;
 opacity: 0;
 -webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 -moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 -ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 -o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 pointer-events: none;
 z-index: 10;
}

[tooltip]:hover {
}

[tooltip]:hover::before,
[tooltip]:hover::after {
 opacity: 1;
 pointer-events: auto;
 top: calc(100% + 0px);
 overflow: visible;
    z-index: 10;
}

<span tooltip="I am a tooltip.">Tooltip</span>

当您将鼠标悬停在工具提示上时，过渡效果在 Google Chrome 中运行得非常好，但在 Internet Explorer 中则不然。当我为 IE 搜索类似的东西时，我什至尝试添加一个空的悬停 CSS 但这也不起作用。对此有帮助吗？

Answer 1

我认为你不需要为此使用 calc。

[tooltip] {
 position: relative;
  margin: 100px;
}

/* Arrow */
[tooltip]:before {
 width: 16px;
 height: 6px;
 left: 50%;
 margin-top: 2px;
 top: 10px;
 content: '';
 position: absolute;
 z-index: 10;
 box-sizing: border-box;
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
 border-bottom: 10px solid #00204e;
 transform: translate(-50%, 0%);
 opacity: 0;
 -webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 -moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 -ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 -o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 pointer-events: none;
}

/* Text */
[tooltip]:after {
 transform: translate(-50%, 0%);
 left: 50%;
 margin-top: 11px;
 top: 10px;
 font-weight: normal;
 text-shadow: none;
 background: #00204e;
 border-radius: 4px;
 color: #fff;
 content: attr(tooltip);
 padding: 10px;
 position: absolute;
 white-space: normal;
 width: 150px;
 width: max-content;
 font-size: 10px;
 font-family: 'Helvetica Neue';
 line-height: normal;
 max-width: 150px;
 text-align: left;
 height: auto;
 display: inline-block;
 opacity: 0;
 -webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 -moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 -ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 -o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 pointer-events: none;
 z-index: 10;
}

[tooltip]:hover {
}

[tooltip]:hover::before,
[tooltip]:hover::after {
 opacity: 1;
 pointer-events: auto;
 top: 20px;
 overflow: visible;
    z-index: 10;
}

<span tooltip="I am a tooltip.">Tooltip</span>

工具提示悬停时的过渡在 IE 上不起作用，在 Google Chrome 中运行良好

Transition on Tooltip hover doesn't work on IE, works well in Google Chrome

html

css

internet-explorer

transition

css-transitions