如何在不移動頁面上的內容的情況下在懸停上顯示文本？

Question

所以，我試圖在鼠標懸停在照片上時顯示一些內容。但是，我很難做到這一點，而無需移動頁面上的其他內容（如下所示）。

如何實施解決方案，在不使用margin-top: -22%的情況下，在前3張圖片下正確顯示內容？

Here is a link to the site

.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的流中。聽起來你已經發現，不同的瀏覽器處理visibilityproperty differently。

如果您要做的僅僅是在懸停的照片下顯示文本而不讓周圍的內容「反彈」，那麼一個非常簡單的訣竅就是將文本放在任何您想要的文檔流中可以用color: transparent進行顯示和設計。

所以，不能夠看到你的HTML，僅供您提供的代碼基礎，一個可能的解決方案是這樣的：

.photo1-content{ 
    color: transparent; 
} 

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

希望這有助於！