html - 为什么当其他工具提示正常工作时此工具提示会折叠？

Question

凝视没有帮助。这<span>在 <button> 内应该显示在 :hover 上，其他人也这样做。但是这个没有。它与 css 有关，因为如果我在其中任何一个上放置相同的类，.tooltipBR , 同样的事情发生了。

代码笔:http://codepen.io/briligg/pen/epqNLd?editors=110

相关CSS:

.tooltipBR span:after {
  top: 18px;
  right: 100%;
  margin-top: -8px;
  border-right: 8px solid #000000;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
:hover.tooltipBR span {
  left: 75%;
  top: -8px;
  margin-left: 100%;
}

.tooltipT, .tooltipTML, .tooltipTL, .tooltipTMR, .tooltipTR, .tooltipL,
.tooltipML, .tooltipR, .tooltipMR, .tooltipB, .tooltipBML, .tooltipBL, .tooltipBBL, .tooltipBMR, 
.tooltipBR {
  position: absolute;
}
.tooltipT span, .tooltipTML span, .tooltipTL span, .tooltipTMR span, 
.tooltipTR span, .tooltipL span, .tooltipML span, .tooltipR span, 
.tooltipMR span, .tooltipB span, .tooltipBML span, .tooltipBL span, .tooltipBBL span, 
.tooltipBMR span, .tooltipBR span {
  position: absolute;
  width:400px;
  color: #FFFFFF;
  background: #000000;
  height: auto;
  line-height: 1.2em;
  text-align: right;
  visibility: hidden;
  border-radius: 6px;
}
.tooltipT span:after, .tooltipTML span:after, .tooltipTL span:after, .tooltipTMR span:after, 
.tooltipTR span:after, .tooltipL span:after, .tooltipML span:after, .tooltipR span:after, 
.tooltipMR span:after, .tooltipB span:after, .tooltipBML span:after, .tooltipBL span:after, 
.tooltipBBL span:after, .tooltipBMR span:after, .tooltipBR span:after {
  content: '';
  position: absolute;
  width: 0; height: 0; 
  z-index: 10;
}
:hover.tooltipT span, :hover.tooltipTML span, :hover.tooltipTL span, :hover.tooltipTMR span, 
:hover.tooltipTR span, :hover.tooltipL span, :hover.tooltipML span, :hover.tooltipR span, 
:hover.tooltipMR span, :hover.tooltipB span, :hover.tooltipBML span, :hover.tooltipBL span, 
:hover.tooltipBBL span, :hover.tooltipBMR span, :hover.tooltipBR span:after {
  visibility: visible;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 8px;
  z-index: 10;
  }

Answer 1

最后一个 CSS block 中的最后一个选择器是 :hover.tooltipBR span:after，但该组中的所有其他选择器都是 :hover.foo span。 .tooltipBR span:after 由您的first block 处理。我认为您需要从最后一个选择器中删除 :after，使其与其他选择器一样。