0

我有 2 个图像，最初我显示小图像，但我使用 CSS 将大图像移出屏幕。但是在将鼠标悬停在小图像上时，我试图将更大的图像带回屏幕上。但这似乎不起作用。

我的代码：

<div class="info">

<div class="image">

<img src="<?php echo $thumb; ?>" id="image" />

<span><img src="<?php echo $popup; ?>"></span></div></div>

和 CSS：

.info .image span {
position:absolute;
left: -9999px;
/*visibility: hidden;*/
/*display: none;*/
background-color:#eae9d4;
}

.info .image img:hover{
z-index: 50;
cursor:pointer;
}

.info .image img:hover span{
/*visibility: visible;*/
/*display: block;*/
top: -10px;
left: -20px;
/*z-index: 99;*/
}

我所尝试的只是在评论中。从技术上讲，它应该可以工作。但我不知道我要去哪里错了。

很感谢任何形式的帮助。谢谢

4

2 回答 2

4

<span>不是图像的后代，它是兄弟。

您需要使用+组合器 not 。

或者，您可以使用.image:hover并且根本不参与包含<img>的选择器:hover。

您还需要调整图像的位置。目前，在其他条件相同的情况下，您将第二张图像的左上角定位在距离窗口顶部 10 像素和距离窗口左侧 20 像素的位置，因此图像的顶部 10x20 像素将超出视线。

于 2013-05-16T12:40:14.773 回答
0

您是否尝试过仅定位图像 ID

.image:hover {
z-index: 50;
cursor:pointer;
}
于 2013-05-16T12:43:41.440 回答