转换时工具提示叠加问题：使用矩阵

Question

我正在尝试将工具提示集成到生成的 HTML 代码中。我的问题是工具提示将不会覆盖 HTML 中定义的较低元素，如果 transform: matrix 应用于它们，我必须为 a 单词创建一个工具提示并显示图像（在本例中苯) 我的问题的一个基本示例可以是 CODEPEN

中的观察者

CSS:

.normal {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.changed {
  transform: matrix(1, 0, 0, 1, 80, 120);
  background-color: pink;
  position: absolute;
  unicode-bidi: bidi-override;
  transform-style:flat;
  z-index:900;
}
.hover {
    position:relative;
    background-color:#e6ffff;
    z-index:900;
}

.tooltip {
  top:0px;
  background-color:white;
  color:white;
  border-radius:5px;
  border:solid 1px #111111;
  display:none;
  position:absolute;
  -webkit-transition: opacity 0.5s;
  -moz-transition:  opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition:  opacity 0.5s;
  transition:  opacity 0.5s;
  z-index:999;
}

.hover:hover .tooltip {
    display:inline;
    z-index:999;
}
.tooltip:hover{ z-index:999;}

HTML:

<div class="" style="width:100%;">
<span class="hover">Benzene
    <span class="tooltip">
      <img name="mol-img-786" style="width:200px; height:200px;" src="data:image/png;base64,..."/>
    </span>
</span>  is an important organic chemical compound with the chemical formula C6H6. The benzene molecule is composed of six carbon atoms joined in a ring with one hydrogen atom attached to each. As it contains only carbon and hydrogen atoms, benzene is classed as a hydrocarbon.
</div>
<div class="changed"><span class="hover">Benzene
    <span class="tooltip">
      <img name="mol-img-786" style="width:200px; height:200px;" src="data:image/png;base64,..."/>
    </span>
</span>  is an important organic</div><br/><br/><br/><br/>
<div class="changed"><span class="hover">Benzene
    <span class="tooltip">
      <img name="mol-img-786" style="width:200px; height:200px;" src="..."/>
    </span>
</span>   is an important organic</div><br/><br/><br/><br/><br/><br/>
<div class="changed"><span class="hover">Benzene 
    <span class="tooltip">
      <img name="mol-img-786" style="width:200px; height:200px;z-index:999;" src="data:image/png;base64,..."/>
    </span>
</span>  is an important organic</div>

Answer 1

您不需要 z-index 所有项目。您只对 div.changed.

感兴趣

考虑到工具提示是从元素级别向下显示的。只有以下元素会出现在工具提示上方。如果第一个 .changed 有 z-index: 1000，下一个元素需要 z-index: 999，第三个元素需要 z-index: 998，等等。 , 永远低于他上面的那个。

如果元素很少，请手动添加 z-index，但如果生成了元素，则可以使用来自 js 的 for loop。

document.addEventListener('ready', function(){
   let changed = document.getElementsByClassName('changed'); (1)
   let index = 1000;
   for(let c=changed.length ; c > 0 ; c++){
   changed[c].zIndex = index; (2)
   index--;
   }
});

(1) 选择类为.changed的所有元素。

(2)循环中当前元素会收到当前索引

(3) 索引减1，所以下一个进入循环的元素，你会得到一个小1的z-index。

如需使用 js 编写的更优雅的版本，请留下 intr-un 评论。

TLDR：如果元素很少，请手动添加 z-index，但如果生成了元素，则可以使用 codeblock 中的 js。

转换时工具提示叠加问题：使用矩阵

Tooltip overlay problems when transform: matrix is used

css

tooltip