Question

我正在尝试将工具提示集成到生成的HTML代码中。我的问题是，如果转换：矩阵应用于它们，工具提示将不会覆盖HTML中定义的下层元素，我必须为单词创建工具提示并显示图像（在此示例中苯）我的问题的一个基本示例可以是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

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是z-index: 1000，urmatorul元素是nevoie de z-index: 999，al treilea元素是nevoie de z-index: 998等，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）Selectezi toate elementele cu clasa .changed。

（2）Elementul实际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，scisa in js，zi intr-un comentariu。

TLDR： Daca ai putine elemente，adauga z-index手册，dar daca elementele sunt生成poti folosii js din codeblock。

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

1 个答案: