代码之家  ›  专栏  ›  技术社区  ›  Athar K

工具提示悬停上的过渡在IE上不起作用,在Google Chrome上效果很好

  •  0
  • Athar K  · 技术社区  · 7 年前

    我已经查看了有关过渡不在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,但这也不起作用。有什么帮助吗?

    1 回复  |  直到 7 年前
        1
  •  1
  •   Tan Duong    7 年前

    我想你没必要用 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>