Question

所以我知道当只有一个图像时，如何在使用CSS悬停时显示文本。然而... 我想制作一个页面，其中有三个相同尺寸的图像排列如下：

x | x | X

并将鼠标悬停在一个图像上会显示有关该图像的文本模糊，而其他两个图像会消失。我需要javascript / jQuery才能做到这一点，还是可以单独使用CSS？

另外，这有点复杂，对于项目来说不是必需的，但是当文本出现时，是否可以让正在悬停的图像向左移动（对于第二和第三图像）？和/或是否可以有一个过渡功能，以便文本看起来像是从屏幕后面滚动出来的东西？

那些最后的部分是完全可选的，甚至可能都不可行，实际上我只是想弄清楚如何让其他图像消失时让单个div显示在悬停上。谢谢！

Answer 1

是的，单凭CSS就可以了。

有很多方法可以达到这个目的，但一般的想法是为每个图像（问题中的x）都有一个父元素，其中包含要在图像上显示的图像和标题。然后，您可以使用CSS来制作字幕叠加和/或在悬停时转换到位置。

一个简单的例子是:(见 demo code ）。

<div class="image-wrapper">
    <img src="http://placehold.it/180x120/eeeeee">
    <div class="caption">
        Your caption text here.
    </div>
</div>
<div class="image-wrapper">
    <img src="http://placehold.it/180x120/eeeeee">
    <div class="caption">
        Your caption text here.
    </div>
</div>
<div class="image-wrapper">
    <img src="http://placehold.it/180x120/eeeeee">
    <div class="caption">
        Your caption text here.
    </div>
</div>

<强> CSS

.image-wrapper {
    position: relative;
    width: 180px;
    float: left;
    margin-right: 10px;
}
.image-wrapper:last-child {
    margin-right: 0;
}
.image-wrapper .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    background: rgba(0,0,0, 0.6);
    color: #fff;
    padding: 0.5rem;
}
.image-wrapper:hover .caption {
    display: block;
}

图像上出现的文本悬停在一系列图像中

1 个答案: