将鼠标悬停在其他两个图像上时显示图像的CSS

我正在用divs和background image style属性在另一个图像（第一个图像是化身，第二个是它的帧）上渲染一个图像。问题是，当用户将鼠标悬停在它们上面时，我还希望它们上面都出现一个图像。我已经玩了2个多小时的z-index了，我无法让它工作。悬停在50%的时间内有效（因为悬停和化身的z索引是相同的），或者化身只有在可以看到悬停时才会出现。我尝试过的代码之一（只有当悬停图像也可见时，阿凡达才会显示）：

bg_memberavatar.png是帧，remove.png是我只想在悬停时显示的图像。

---

怎么做？

我想这或多或少就是你需要的

您在所有元素上使用相对定位，而绝对定位是您所需要的

• 相对意味着元素从页面布局中移除，但是它的尺寸会影响布局，并且它的位置会影响绝对/相对定位的子元素

• 绝对意味着元素完全从布局中取出，绝对定位到窗口，或者（如果存在）第一个定位的父元素，后者就是我在示例中使用的

希望您能理解代码中的一些内容

echo "<div style=\"display:inline-block; width:81px; height:65px;\">";
echo "<div style=\"display:inline-block; position:relative; z-index:2; top:2px; left:17px; width:47px; height:47px; background:url('$avatarpath')\"></div>";
echo "<div style=\"display:inline-block; position:relative; top:-47px; z-index:3; left:15px; width:51px; height:51px;\" class=\"pportraita\"></div>";
echo "</div>";

    .pportraita {
position: relative;
z-index: 1;
background: url('../img/matchpage/bg_memberavatar.png') bottom no-repeat;
    }

.pportraita:hover {
position: relative;
z-index: 1;
background: url('../img/matchpage/remove.png') bottom no-repeat;
    }