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

Question

我正在尝试将工具提示集成到生成的HTML代码中。我的问题是，如果转换，工具提示将不涵盖 HTML 中定义的较低元素：矩阵应用于它们，我必须为 a 单词创建一个工具提示并显示图像(在本例中为 Benzene(我的问题的一个基本示例可以是此代码笔中的观察者

.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

Nu ai nevoie de z-index pe toate elementele.Te intereseaza doar div.changed .

Avand in vedere ca tooltipul apare de la nivelul elementului in jos.Doar elementele urmatoare vor aparea deasupra tooltipului.Daca primul .changed are z-index: 1000 ， urmatorul element are nevoie de z-index: 999 ， al treilea element are nevoie de z-index: 998 etc. ， pentru a fii tot timpu sub cel de deasupra lui.

Daca ai putine elemente， adauga z-index manual， dar daca elementele sunt generate poti folosii un for loop din js.

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(选择托特元素 cu clasa .changed .

(2( Elementul actual din loop va primii indexul actual

(3( Indexul este decrementat cu 1， astfel urmatorul element ce va intra in loop， va primii un z-index cu 1 mai mic.

Pentru o varianta mai eleganta， scrisa in js， zi intr-un comentariu.

TLDR： Daca ai putine elemente， adauga z-index manual， dar daca elementele sunt generate poti folosii js din codeblock.