Question

我正在使用div和background-image样式属性在另一个图像上渲染图像（第一个图像是头像，第二个图像是框架）。问题是当用户将鼠标悬停在它们上面时，我还希望图像显示在所有2个图像上。我现在玩z-index超过2小时，我无法让它工作。悬停在50％的时间内起作用（因为悬停和头像的z索引是相同的），或者只有在还可以看到悬停时才显示虚拟形象。我试过的其中一个代码（只有当hoverimage也可见时，头像显示）：

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>";

CSS：

    .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;
    }

bg_memberavatar.png是框架，remove.png是我想要仅在悬停时显示的图像。怎么做？

Answer 1

我想这或多或少是你所需要的？

http://jsfiddle.net/h36au/

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

相对意味着元素从页面布局中取出，但它的尺寸会影响布局 - 它的位置会影响绝对/相对定位的子元素。
绝对意味着元素完全从布局中取出，并且完全定位到窗口 - 或者（如果存在）第一个定位的父元素，后者就是我在我的示例中使用的。

希望您了解代码中的内容......

CSS在悬停在其他2个图像上时显示图像

1 个答案: