Question

所以，当鼠标悬停在照片上时，我试图显示一些内容。但是，我很难在不移动页面上的其他内容的情况下执行此操作（下面）。

如何在不使用margin-top: -22%的情况下实现在前3张图片下显示内容的解决方案？

.eCommerce{
    margin-left: 7%;
}

.photo1-content{
    display: none;
}

.photo1:hover .photo1-content{
    display: block;
    margin-top: -22%;
    margin-left: 13%;
}

.photo2-content{
    display: none;
}

.photo2:hover .photo2-content{
    display: block;
    margin-top: -22%;
    margin-left: 44%;
}

.photo3-content{
    display: none;
}

.photo3:hover .photo3-content{
    display: block;
    margin-top: -22%;
    margin-left: 75%;
}

.photo4-content{
    display: none;
}

.photo4:hover .photo4-content{
    display: block;
    margin-top: -1%;
    margin-left: 13%;
}

.photo5-content{
    display: none;
}

.photo5:hover .photo5-content{
    display: block;
    margin-top: -1%;
    margin-left: 44%;
}

.photo6-content{
    display: none;
}

.photo6:hover .photo6-content{
    display: block;
    margin-top: -1%;
    margin-left: 75%;
}

.enterprise{
    position: static;
}

Answer 1

Michael_B对于display: none是正确的。在显示之前，元素不在DOM的流中。听起来您已经发现，不同的浏览器会处理visibility property differently。

如果你想要做的只是在悬停时显示照片下的文字而不使周围的内容“反弹”，一个非常简单的技巧就是将文本放在文档的流程中，无论你想要它在哪里使用color: transparent显示并设置样式。

因此，如果无法看到您的HTML并且仅基于您提供的代码，可能的解决方案将如下所示：

.photo1-content{
    color: transparent;
}

.photo1:hover .photo1-content{
    color: black;
}

希望这有帮助！

如何在不在页面上移动内容的情况下悬停显示文本？

1 个答案: