2

如果这个问题已经一次又一次地得到回答，我深表歉意。我记得几年前我第一次编写网站脚本时彻底寻找答案，但我一直找不到。现在也一样。

最近我重新编写了我网站的脚本，以便我可以将它托管到 Weebly 上。这是我需要帮助的网站的四个页面之一。如您所见，当缩略图悬停时弹出的图像是绝对定位的。对于大多数计算机分辨率和/或浏览器，这将使图像出现在指定框之外。我怎样才能将它们定位到 div 的内左上角？或者更好的是，在其中水平和垂直居中？

<section id="Sizes" style="float: left">
<a href="#Space">
<img class="Small" src="/files/theme/SampleD_Fun_Icon.png" width="150" height="150" alt="Sample 1: Day of Fun" />
<img class="Large" src="/files/theme/SampleD_Fun.png" width="150" height="150" alt="Sample 1: Day of Fun" />
</a>
...
</section>
<a id="Space"></a>
<span class="Popup">Hover over thumbnail to display sample artwork.</span>
<br style="clear: left" />

a:hover img.Small
{
    border: 5px solid #21568b;
    margin: 10px;
    text-decoration: none;
}
section#Sizes a img.Large
{
    border-width: 0;
    height: 0;
    left: 438px;
    position: absolute;
    top: 326px;
    width: 0;
}
section#Sizes a:hover img.Large
{
    height: 526px;
    left: 438px;
    position: absolute;
    top: 326px;
    width: 520px;
}
.Popup
{
    border: 3px solid;
    float: left;
    height: 272px;
    margin: 8px 20px 0px 0px;
    padding-top: 254px;
    text-align: center;
    width: 520px;
}

感谢您的时间。:)

4

4 回答 4

0

我看到你已经在使用 jQuery 了，为什么不做这样的事情呢？

$('.Small').on('mouseover', function(){
$('.Popup').empty().html($(yourtarget).attr('img' , 'src'));
});

$('.Small').on('mouseout', function(){
$('.Popup').empty().html('Hover over thumbnail to display sample artwork.');
});
于 2015-04-18T19:43:38.830 回答
0

正因为大家都说纯css做不到，所以我想证明它可以，而且很简单。看看下面的例子：

http://jsfiddle.net/aafa2zp5/

<div id='images-wrapper'>
    <ul>
        <li>
            <img class='small' src='http://placehold.it/50/ff0000'/>
            <img class='big' src='http://placehold.it/300/ff0000'/>
        </li>
        <!-- and some more similar thumb / image groups -->
    </ul>
    <div class='preview-area'></div>
</div>

CSS（或至少相关部分）

#images-wrapper {
    position: relative;
}
.big {
    display: block;
    position: absolute;
    top: 54px;
    right: 54px;
    opacity: 0;
    transition: opacity .5s;
}  
.preview-area {
    width: 350px;
    height: 350px;
    border: 4px solid blue;
    position: absolute;
    top: 21px;
    right: 21px;
}
li:hover .big {
    opacity: 1;
}

关键是设置相对于包装器的位置（并将所有后代保持为默认静态）。然后，您可以使用它来定位预览区域和大图像，方法是将它们设置为绝对位置并仔细计算正确的位置。我什至添加了交叉淡入淡出，只是因为它很简单，但如果你愿意，你也可以使用显示块/无。

对于较小的屏幕，您可能希望更改媒体查询中的尺寸和位置，但它仍然应该是可行的（尽管取决于悬停状态可能不是触摸设备上的最佳主意）

我希望你能明白这一点，并且你能弄清楚如何将这种技术应用到你自己的网站上。随时询问您是否希望我进一步解释或当您遇到困难时。

于 2015-04-18T21:24:17.190 回答
0

TLDR：你不能在纯 CSS 中做到这一点。

如果将图像元素放置在 div 元素内，然后使用绝对定位top: 0; left: 0;（或使用许多其他方法），您可以轻松地将图像放置在容器 div 内。但是，您需要 JavaScript 将悬停的缩略图与弹出的全尺寸图像相关联。

或者，您可以将全尺寸图像嵌套在缩略图元素中（就像您目前拥有的那样），但是您需要 JavaScript 将全尺寸弹出图像定位在容器 div 内。

在这两种选择中，我推荐第一种：将所有弹出图像放在目标容器中，并在缩略图悬停时使用 JavaScript 显示或隐藏它们。通过 JavaScript 关联缩略图和全尺寸图像比编写定位代码更容易。

于 2015-04-18T19:11:30.610 回答
0

你的整个设计有点脆弱，我不建议首先以这种方式构建，但你正在寻找实用的答案，所以这是我能想到的最小的改变，可以解决你的问题：

1）将此添加到您的样式表中：

body { position: relative; }

2) 在 main_style.css 的第 40 行，将和更改top: 326px为，使其变成这样：top: 316pxleft: 438pxleft: 428px

section#Sizes a:hover img.Large {position: absolute; top: 316px; left: 428px; width: 520px; height: 526px;}

这是如何运作的？

您的图像使用绝对定位放置。默认情况下，这相对于视口（窗口）起作用。但是通过将 body 变成相对位置，它就变成了一个包含块，并且绝对位置是相对于最近的包含块祖先的。

所以现在，您的图像固定在 body 元素中，而不是相对于窗口固定。由于 body 元素的边距是调整窗口大小时改变大小的因素，这使得内容的各个部分相对于彼此固定。然后你只需要从顶部和左侧移除 10px，因为这是你的 body 元素边框的大小，我们现在从边框内部测量。

于 2015-04-18T19:28:55.403 回答