1

我发现了一些 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);
}
4

1 回答 1

1

您需要将文本放入其中span1并将内容放入ul.enlarge2 spancss for 中的新标签中span1。这样你就可以更容易地操纵那个白盒子。你也需要display:block和margin:0 auto使span1居中。

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

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

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

它可能不是这样做的最优雅的方式，并且它可能无法验证，因为我已将 div 放入 span 等。

如果您希望该框出现在图像span1之前。 http://jsfiddle.net/JVQp7/1/

于 2013-03-17T01:58:14.950 回答