html - 悬停放大时的跨度和图像大小

Question

我发现了一些 css，可以让你在悬停时放大图像，而且在大多数情况下效果很好。

我的问题是我一直在处理特定尺寸的所有图像，这对它们来说效果很好，现在我在另一个具有两种不同尺寸的页面上，所以我必须制作另一个 css 类。

http://jsfiddle.net/fj8hP

jsFiddle 的播放方式与我的网站不同...但它可以更好地可视化我的问题。

图像上方的部分，即白框，似乎与图像大小有直接关系。我有所有短宽度和长图像，所以很好，但现在我正在处理更宽的图像，并且不喜欢横跨整个图像的框。所以如果我在这部分将宽度设置为 300px

ul.enlarge2 span {
    position:absolute;
    height:10px;
    width:300px;
}

图像将以所需的大小显示。我希望它不大于 100，并以图像为中心。有什么想法吗？

这是 CSS:

ul.enlarge2 {
    list-style-type:none;
    /*remove the bullet point*/
    margin-left:0;
}
ul.enlarge2 li {
    display:inline-block;
    /*places the images in a line*/
    position: relative;
    z-index: 0;
    /*resets the stack order of the list items - later we'll increase this*/
    margin:5px 10px 0 10px;
}
ul.enlarge2 img {
    background-color:#eae9d4;
    padding: 6px;
    -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
ul.enlarge2 span {
    position:absolute;
    height:10px;
    width:100px;
    left: -9999px;
    background-color:white;
    padding: 10px;
    font-family:'Droid Sans', sans-serif;
    font-size:.9em;
    text-align: center;
    color: transparent;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .75));
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .75);
    box-shadow: 0 0 20px rgba(0, 0, 0, .75);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius:8px;
}
ul.enlarge2 li:hover {
    z-index: 150;
    cursor:pointer;
}
ul.enlarge2 span img {
    padding:2px;
    background:#ccc;
}
ul.enlarge2 li:hover span {
    top: 100px;
    /*the distance from the bottom of the thumbnail to the top of the popup image*/
    left: 0px;
    /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge2 li:hover:nth-child(2) span {
    left: -200px;
}
ul.enlarge2 li:hover:nth-child(3) span {
    left: -200px;
}
ul.enlarge2 img, ul.enlarge span {
    behavior: url(pie/PIE.htc);
}

Answer 1

您需要将文本放在 span1 中，并将 ul.enlarge2 span 中的内容放入 span1 的 css 新标记中。这样你就可以更容易地操作那个白框。您还需要 display:block 和 margin:0 auto 来使 span1 居中。

ul.enlarge2 span{
position:absolute;
left: -9999px;
background-color:white;
}

这就是您在该部分所需的全部内容，其他所有内容都进入 span1 标记。

这是带有不同图片的 fiddle http://jsfiddle.net/JVQp7/

这可能不是最优雅的方式，而且它可能无法验证，因为我将 div 放在 span 等中。

如果您希望框出现在图像之前，请将 span1 放在它之前。 http://jsfiddle.net/JVQp7/1/