将鼠标悬停在其他 2 个图像上时 CSS 显示图像答案

【问题标题】：CSS Showing image when hovered over 2 other images将鼠标悬停在其他 2 个图像上时 CSS 显示图像
【发布时间】：2011-12-20 07:12:22
【问题描述】：

我正在使用 divs 和 background-image 样式属性在另一个图像上渲染图像（第一个图像是头像，第二个是它的框架）。问题是当用户将鼠标悬停在它们上时，我还希望图像出现在所有 2 个上。我已经玩 z-index 超过 2 小时了，但我无法让它工作。悬停在 50% 的时间内有效（因为悬停和头像的 z-indexes 相同）或者头像仅在悬停时才显示。我尝试过的代码之一（头像仅在悬停图像也可见时显示）：

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 是我只想在悬停时显示的图像。怎么做？

【问题讨论】：

标签： css

【解决方案1】：

我猜这或多或少是你需要的？

http://jsfiddle.net/h36au/

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

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

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

【讨论】：