防止在工具提示容器上悬停效果

Question

我创建了一个工具提示文件

 [tooltip]:before { content: attr(tooltip); position: absolute; opacity: 0; right: 0; top: 110%; z-index: 9999; color: #ffffff; background: #333333; padding: 10px; transition: all 0.5s ease; } [tooltip]:hover:before { opacity: 1; } [tooltip] { position: relative; } /* other stuff */ #container { width: 150px; height: 50px; background: red; } 

 <div id="container" tooltip="Tooltip">Div with tooltip</div> 

它确实可以正常工作，但是当将鼠标悬停在工具提示位置时，也会触发悬停效果。 将鼠标悬停在工具提示所附加的元素上时，应该刚刚触发悬停效果。

如何使工具提示仅在将元素悬停时显示？

Answer 1

您可以从工具提示中删除pointer-events ：

 [tooltip]:before { content: attr(tooltip); position: absolute; opacity: 0; right: 0; top: 110%; z-index: 9999; color: #ffffff; background: #333333; padding: 10px; transition: all 0.5s ease; pointer-events: none; /* add this */ } [tooltip]:hover:before { opacity: 1; } [tooltip] { position: relative; } /* other stuff */ #container { width: 150px; height: 50px; background: red; } 

 <div id="container" tooltip="Tooltip">Div with tooltip</div> 

Answer 2

添加pointer-events: none; 工具提示类。

它禁用元素上的鼠标事件（单击，拖动，悬停等）。

希望这可以帮助 ：）

 [tooltip]:before { content: attr(tooltip); position: absolute; opacity: 0; right: 0; top: 110%; z-index: 9999; color: #ffffff; background: #333333; padding: 10px; transition: all 0.5s ease; pointer-events:none; } [tooltip]:hover:before { opacity: 1; } [tooltip] { position: relative; } /* other stuff */ #container { width: 150px; height: 50px; background: red; } 

 <div id="container" tooltip="Tooltip">Div with tooltip</div>