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

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>