鼠標懸停在CSS中編碼的預覽：字幕框不會根據圖像大小調整大小

Question

抱歉，如果標題或此評論不是那么容易理解，我不會說英語。

問題是，我編寫了一個代碼，當用戶將鼠標懸停在圖片上時，將以更大的尺寸預覽圖片。 放大后，圖片將包含說明，問題在於圖片很大時，說明框不會相應地延伸。 當我想將大圖像預覽縮小為小預覽時，我發現了這個問題，為了解決這個問題，我寫了以下這一行：

ul.enlarge span img {
max-width:600%;

}

它解決了調整大小的問題，但現在標題不適合新的大小。

我在互聯網教程中發現，這個教程很簡潔，而且與我想要的類似，但我仍然面臨相同的問題。

注意：如果圖像較小，則標題將不會遇到任何問題，該問題僅適用於大圖像。

謝謝。

 ul.enlarge{ list-style-type:none; } ul.enlarge li{ display:inline-block; position: relative; z-index: 0; margin:5px 5px 0 0px; } ul.enlarge span{ position:absolute; left: -9999px; } ul.enlarge img{ background-color:#eaeaed; padding: 4px; border: 1px solid #9799a7; } ul.enlarge li:hover{ z-index: 50; } ul.enlarge li:hover span{ top: -20px; left: 50px; } ul.enlarge li:hover:nth-child(2) span{ left: -100px; } ul.enlarge li:hover:nth-child(3) span{ left: -200px; } ul.enlarge span{ padding: 10px; background:#eaeaed; text-align:center; color: #495a62; } /* This is to solve the problem when huge images are previewed, it shows them smaller */ ul.enlarge span img { max-width:600%; }

 <body> <ul class="enlarge"> <li> <img src="http://placehold.it/140x100" alt="description" width="100px" height="100px"/> <span> <img src="http://placehold.it/140x100" alt="description"/> <div class="phototitle"> Photo caption is too small or don't fit image's size. </div> </span> </li> </ul> </body>

Answer 1

這是因為您沒有將寬度設置為ul.enlarge li:hover span 。
例如：

ul.enlarge li:hover span {
    top: -20px;
    left: 50px;
    width: 200px; /* You need to set a width here */
}

這是一個在線示例

盡管如果我是您，我會在此代碼中進行一些更改。
首先，我將刪除以下position: relative; 來自ul.enlarge li原因是它避免了span變大，因為它取決於ul.enlarge li大小/寬度，其position: relative; 您添加了：

ul.enlarge li {
    display: inline-block;
    position: relative;  /* I'd remove this line */
    z-index: 0;  /* And I'd remove this line as well because it's doing nothing here */
    margin: 5px 5px 0 0px;
}

我也將其完全刪除

ul.enlarge li:hover{
    z-index: 50;  
}

而且我還將重新安排部分代碼，如下所示：

.enlarge span img {
    height: 90%;
}
.enlarge .phototitle {
    height: 10%;
}
.enlarge li:hover span {
    top: 8%;
    left: 50%;
    margin-left: -40%;
    width: 80%;
    height: 80%;
}
.enlarge span{
    position:absolute; 
    display:none;
} 
.enlarge li:hover > span {
    display: block;
}

注意：看起來，這段代碼似乎可以隱藏內容並在將圖像懸停時顯示它，盡管這不是正確的方法。 這是一個更好的方法。

我已經交換了這個：

ul.enlarge span{
    position:absolute; 
    left: -9999px; 
}

為了這：

.enlarge span{
    position:absolute; 
    display:none;
} 
.enlarge li:hover > span {
    display: block;
}

這是整個代碼以及它的外觀

鼠標懸停在CSS中編碼的預覽：字幕框不會根據圖像大小調整大小

問題描述

1 個解決方案

解決方案1
0 2015-04-10 20:58:39

鼠標懸停在CSS中編碼的預覽：字幕框不會根據圖像大小調整大小

問題描述

1 個解決方案

解決方案1 0 2015-04-10 20:58:39

解決方案1
0 2015-04-10 20:58:39