Question

以下是我必须做的事情：

适当的JavaScript和html，以便用户移动鼠标时在一个特定类型的房间的缩略图上特价商品，显示与其相关的全尺寸（大）图像（请注意，较大图像的显示不应导致其他页面要移动的元素）。当用户将鼠标移开时缩略图，较大的图像应该消失。

我只是希望能够将鼠标悬停在这些图片上并让它们显示在页面上方，而不会改变页面的外观。

这是我目前的javascript部分;

div = {
    show: function(elem) {
        document.getElementById(elem).style.visibility = 'visible';
    },
    hide: function(elem) {
        document.getElementById(elem).style.visibility = 'hidden';
    }
}

但我不确定这是对的还是现在我想要的，

然后这是html;

<a href="images/garden2.jpg" class="preview"><img src="images/garden2.jpg" width="201"       height="143" alt="Garden Room" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')"/></a>
        <div id="div1"><img src="images/garden2.jpg" alt="Garden Room" /></div>

但是会在图像下方创建一个div并改变我的元素，这不是我想要发生的。

Answer 1

如果你想让一些元素出现在其他元素之上，那么这个元素需要定位 - 在你的情况下，最好的方法是设置所有容器元素 - 意味着包含原始显示图像和隐藏图像的元素 - 在样式位置相对 - 隐藏的图像设置绝对位置，当您将鼠标悬停在原始图像上时，只显示隐藏的图像作为您的编码：

我做了一个简单的jsfiddle让你理解

HTML：

<div class="container">
    <a href="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')" /></a>
    <div id="div1" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" /></div>
<div>

<div class="container">
    <a href="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')" /></a>
    <div id="div2" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" /></div>
<div>

的CSS：

.container{
    position: relative;
}

.container .hid-img{
    position: absolute;
    display:none;
    z-index:1;
}

JS：

var div = {
    show: function(elem) {
        document.getElementById(elem).style.display = 'block';
    },
    hide: function(elem) {
        document.getElementById(elem).style.display = 'none';
    }
}

修改只需将宽度，高度添加到img标记http://jsfiddle.net/MKPgv/2/

Answer 2

我会使用更简单的代码：

HTML：

<a href="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
</a>

<a href="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
</a>

CSS：

a {
    position: relative;
    display: inline-block;
}

a .fullsize {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    z-index: 1;
}

a:hover .fullsize {
    display: inline;
}

JS： -none -

小提琴：http://jsfiddle.net/84anu/ 预览http://jsfiddle.net/84anu/show/

通过在页面上移动我的其他元素，使图像显得更大

2 个答案: