Question

我正在使用HTML和CSS创建“悬停在”照片库，“悬停在”缩略图下方生成大图片' 我的HTML如下所示：

<div id="container">
    <a class="thumbnail" href="#thumb"><img src="thumb1.jpg" /><span><img src="photo1.jpg" /><br />Simply beautiful.</span></a>

我已将容器设置为900px宽，并在其下方重复8次。这会将8个缩略图放在从容器左上角开始的一行中。

我可以使用CSS代码中的“top”将图像的位置设置为低于此拇指线，但不能设置图像的左右位置。它始终从相应缩略图的右侧开始。

我似乎已经尝试了一切，但希望我没有。

帮助！请。

Answer 1

这个CSS应该有所帮助：

.thumbnail {
    position: relative;
}

.thumbnail span {
    display: none;
}

.thumbnail:hover span {
    display: block;
    position: absolute;
    top: 30px;
    left: 0;

    background: #fff;
    padding: 10px;
}

这应该将跨度定位为与拇指左边相同的距离。

一个工作示例：

http://www.ulmanen.fi/stuff/hoverthumb/

将<span>图像定位在照相馆</span>中

1 个答案: