div 工具提示上的 z-index 和 transform skewX 屬性有問題

Question

css 程序員，各位程序員大家好； 我對此有點頭疼。 我無法在具有相同屬性的圖像上方顯示 position 工具提示； 這是問題之一； https://prnt.sc/shovd7

如您所見，上面的內容沒有與最后一張圖片重疊。 我不明白為什么。 我設置了一個“r”class 來配置屏幕的右側以供 position 使用。

這是工具提示的代碼；

 .tooltip {outline:none;position: relative;display: inline-block;}.tooltip div { z-index: 4; display: none; color: white; text-shadow: none; text-decoration: none; background: #252525; padding: 0px 15px; white-space: prewrap; width: 265px; font-size: 16px; float: left; box-shadow: 0px 0px 5px -3px #ffffff, 0 0px 0px 0 rgba(255, 70, 70, 0.19); text-align: left; position: fixed; }.last{ width: 25px; margin-right: 5px; margin-bottom: 5px; position:relative; z-index: 2; }.tooltip.r div { float: right; position: fixed; }.tooltip.r > img { transform: skewx(-30deg); }.le{ position: absolute; }.le.r{ right: 183px; width: 89px; height: 139px; overflow-y: auto; transform: skewX(30deg); padding-left: 20000px; margin-left: 0px; overflow-x: hidden; padding-right: 2px; float: right; } a.tooltip:hover div{ display: inline-block; position: absolute;}

 <div class="le r"> <a class="tooltip r" href="#"> <img id="665" class="fl-r last" src="https://www.anime-blast.com//images/skills/665.png?"> <div> <img class="point" src="./images/arrow_right.png"> <h1>Bodiless Suit of Armor</h1><p>- <b>Alphonse Elric</b> has 5 damage reduction.<i style="color:#BA2415;"> this skill ends when Alphonse Elric dies</i></p><p>- <b>Alphonse Elric's</b> damage will be increased by 10.<i style="color:#BA2415;"> this skill ends when Alphonse Elric dies</i></p></div></a> <a class="tooltip r" href="#"> <img id="665" class="fl-r last" src="https://www.anime-blast.com//images/skills/665.png?"> <div><img class="point" src="./images/arrow_right.png"> <h1>Bodiless Suit of Armor</h1><p>- <b>Alphonse Elric</b> has 5 damage reduction.<i style="color:#BA2415;"> this skill ends when Alphonse Elric dies</i></p><p>- <b>Alphonse Elric's</b> damage will be increased by 10.<i style="color:#BA2415;"> this skill ends when Alphonse Elric dies</i></p></div></a> </div>

最后，我的第二個問題是我在一個 div 中設置了工具提示，該 div 保存了最后使用的“能力”的記錄。 你hover過來，這個能力的描述顯示。 https://prnt.sc/shozxl

我試圖隱藏它的滾動條，所以我在左邊添加了一個填充，問題是填充與其他玩家的技能重疊，我無法點擊它們，window 分為 2 和一個頁腳。 因此，如果我在屏幕左側設置一個 z-index，它會將工具提示本身隱藏在角色技能集下方。 滾動條是否有任何解決方法或當前設計的修復程序。 我正在嘗試優化它以適用於所有瀏覽器。

我的項目取決於你們所有人。很抱歉造成混淆，如果我重復一個問題。 我環顧四周，真的找不到解決辦法。

Answer 1

要隱藏滾動條，您只需更改overflow-x: hidden; 和overflow-y: auto; 只有單數overflow: hidden; 樣式屬性：

.le.r{
    right: 183px;
    width: 89px;
    height: 139px;
    overflow: hidden;
    transform: skewX(30deg); 
    padding-left: 20000px;
    margin-left: 0px;
    padding-right: 2px; 
    float: right;
}