将鼠标悬停在黑色上时显示工具提示 space

Question

http://fiddle.jshell.net/9m6a5y5p/

在上面的演示中，当悬停在跨度元素工具提示上方时，我只想在悬停在跨度上时显示...是的，我知道我可以使用显示：none，但我我正在努力避免这种情况...

    tooltip {
  color: #E4095C;
  position: relative;
}

.tooltip::before,
.tooltip::after {
  opacity: 0;
  z-index: -100;
  position: absolute;
}

.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
  z-index: 100;
}

.tooltip::before {
  content: '';
  border: .825em solid transparent;
  border-top-color: #0D8EAD;
  bottom: 45%;
  left: 35%;
}

.tooltip::after {
  content: attr(data-tip);
  width: 12em;
  padding: .85em;
  background: #0D8EAD;
  bottom: 175%;
  left: 5%;
  margin-left: -3.25em;
  color: #f8f8f8;
}

Answer 1

您可以使用 pointer-events 来防止触发悬停事件。将此添加到您的 CSS:

.tooltip::after {
    pointer-events: none;
}

Answer 2

只需在 .tooltip::after{}

后添加以下 css

.tooltip::after {
    pointer-events: none;
}

玩得开心..!!

将鼠标悬停在黑色上时显示工具提示 space

Tooltip is showing when hover on black space

html

css

tooltip