防止工具提示容器上的悬停效果答案

【问题标题】：prevent hover effect on a tooltip container防止工具提示容器上的悬停效果
【发布时间】：2018-01-16 20:48:56
【问题描述】：

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

[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;
}

&lt;div id="container" tooltip="Tooltip"&gt;Div with tooltip&lt;/div&gt;

它工作得很好，但是当悬停在工具提示位置时，悬停效果也会触发。悬停效果应该只在悬停在工具提示附加到的元素上时触发。

如何使工具提示仅在悬停元素时出现？

【问题讨论】：

你用纯css 做这个很好，但是有一个问题，你应该改变top: 110%; 依赖元素height，注意！
@Pedram 你有更好的主意吗？
我去了bottom: -38px;，但我不知道
好吧，我不考虑css 的解决方案，可能你需要一些小的java 脚本

标签： html css

【解决方案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;
}

&lt;div id="container" tooltip="Tooltip"&gt;Div with tooltip&lt;/div&gt;

【讨论】：

【解决方案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;
}

&lt;div id="container" tooltip="Tooltip"&gt;Div with tooltip&lt;/div&gt;

【讨论】：