Question

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

我的问题是我一直在处理一定大小的所有图像，并且它对他们很有用，现在我在另一个页面上有两种不同的大小，所以我必须创建另一个css类。

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标记。

这里有一个不同的图片http://jsfiddle.net/JVQp7/

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

如果您希望在图像放置span1之前显示该框。 http://jsfiddle.net/JVQp7/1/

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

1 个答案: