Question

很抱歉，如果标题或评论不是那么容易理解，我就不会说英语。

问题是，我写了一个代码，当用户将鼠标放在图片上时，图片将以更大的尺寸进行预览。放大时，图片将包含描述，问题是当图片非常大时，描述框不会相应地拉伸。当我想让大型图像预览更小时，我发现了这个问题，为了解决这个问题，我写了这一行：

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

}

它解决了调整大小问题，但现在标题不适合新尺寸。

我在互联网教程中发现，这个很整齐，类似于我想要的东西，但我仍面临着同样的问题。

注意：如果图片很小，标题不会出现任何问题，问题仅适用于大图片。

谢谢。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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 */
}

这是online example

虽然如果我是你，我会对此代码进行一些更改首先，我会从position: relative;中移除ul.enlarge li，因为它会避免span更大的尺寸，因为它取决于ul.enlarge li尺寸/宽度，因为{{1} 1}}你补充说：

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

以下是whole code及其外观

在CSS中编码的悬停预览：标题框不会根据图像大小调整大小

1 个答案: