Question

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

正如你可以在上面的演示中，当悬停在span元素工具提示上方时，我只想显示何时悬停在span ...是的我知道我可以使用display：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;
}

玩得开心!! !!

将鼠标悬停在黑色空间

2 个答案: