如何在页面上移动内容时悬停文字？ [英] How to display text on hover without moving content on page?

问题描述

所以，我试图显示一些内容，当鼠标悬停在一张照片。但是，我很难做到这一点，而不移动页面上的其余内容（下面）。

So, I am trying to display some content when the mouse hovers over a photo. However, I am having a hard time doing this without moving the rest of the content on the page (below).

我如何实现一个解决方案来显示内容在顶部3图像下，不使用 margin-top：-22％？

How would I implement a solution to display the content right under the top 3 images without using margin-top: -22%?

这是指向该网站的链接

.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;
}

推荐答案

c $ c> display：none 。在显示之前，元素不在DOM的流中。听起来你发现，不同的浏览器处理 visibility 属性不同。

Michael_B is correct about display: none. The element is not in the flow of your DOM until it becomes displayed. As it sounds like you've discovered, different browsers handle the visibility property differently.

如果你想要做的只是显示悬浮照片下的文本具有周围内容bounce，一个很容易的伎俩是将文本放在文档的流程中，无论你想要显示它，并用 color：transparent 。

If what you are trying to do is merely display the text under the photos on hover without having the surrounding content "bounce", a really easy trick is to put the text in the flow of the document wherever you want it to be displayed and style it with color: transparent.

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

So, without being able to see your HTML and based solely on your provided code, a possible solution would look like this:

.photo1-content{
    color: transparent;
}

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

希望这有助！

这篇关于如何在页面上移动内容时悬停文字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！