水平滚动图像缩略图，并在鼠标悬停时弹出图像
水平滚动图像缩略图，并在鼠标悬停时弹出图像
提问于 2013-07-13 23:41:39
我已经用html和css写了一些代码来水平滚动图像缩略图，并让它们在鼠标悬停时弹出。问题是，当我可以水平滚动时，鼠标悬停时弹出的(放大的)图像只能在它所在的div中可见。我希望它是可见的在页面上的所有其他东西。但由于我是通过设置div overflow-x:scroll属性来创建滚动条的，所以如果放大的图像比div大，则必须滚动才能看到它。当我看不到要滚动的overflow-x属性时，我可以像我想要的那样在其他任何东西上面查看放大的图像，但所有其他的缩略图也是可见的。下面是显示我所做的工作的代码片段。
HTML
<div id="example1">
<h1>This is an example</h1>
<h2>Car 1</h2>
<div class="scroll">
<div id="example1_car1">
<a class="thumb" href="#"><img src="car1.jpg" alt="car1" height="200" width="251"><span> <img src="car1.jpg" alt="car1"></span></a>
<a class="thumb" href="#"><img src="car2.jpg" alt="car2" height="200" width="251"><span><img src="car2.jpg" alt="car2"></span></a>
<a class="thumb" href="#"><img src="car3.jpg" alt="car3" height="200" width="251"><span><img src="car3.jpg" alt="car3"></span></a>
</div><!--example1_car1-->
</div><!--example1_scroll-->
<h2>Car 2</h2>
<div class="scroll">
<div id="example1_car2">
<a class="thumb" href="#"><img src="car1.jpg" alt="car1" height="200" width="251"><span><img src="car1.jpg" alt="car1"></span></a>
<a class="thumb" href="#"><img src="car2.jpg" alt="car2" height="200" width="251"><span><img src="car2.jpg" alt="car2"></span></a>
<a class="thumb" href="#"><img src="car3.jpg" alt="car3" height="200" width="251"><span> <img src="car3.jpg" alt="car3"></span></a>
</div><!--example1_car2-->
</div><!--example2_scroll-->
</div><!--example1-->
CSS
#example1_car1,#example1_car2,.scroll{
position:relative;
}
#example1_car1, #example1_car2
{
width:2400px;
height:200px;
z-index:0
}
.scroll
{
width:800px;
height:210px;
overflow-x:scroll;
z-index:0;
}
.thumb img {
border:1px solid #000;
margin:3px;
float:left;
zindex:-1;
}
.thumb span {
position: relative;/*absolute;*/
display:none;
}
.thumb:hover, .thumb:hover span {
display:inline;
top:0; left: 0px;
/*z-index:1;*/
z-index:10;
}任何帮助都将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-07-15 04:07:23
要使放大的图像显示在可滚动区域的顶部/外部，它必须实际位于可滚动区域的外部。
要使放大的图像显示在外部，当鼠标悬停在可滚动区域内的缩略图上时，您需要在HTML和CSS的顶部使用JavaScript。
这是an example on jsfiddle，在其中我没有改变你的HTML结构。相反，当您将鼠标悬停在缩略图上时，我使用jQuery在可滚动区域之外克隆放大的图像，并将其附加到#example1div。
JavaScript部分：
$('.thumb').hover(
function(){
var thumb = $(this).children('img');
var large = $(this).find('span>img').clone();
$('#example1').append(large);
large.addClass('enlargedImg');
large.css({
'top': thumb.offset().top,
'left': thumb.offset().left
});
},
function(){
$('.enlargedImg').remove();
}
);我使用拇指图像的offset()值将放大的图像直接定位在它的顶部。您可能希望将其移动一点，但希望这足以让您开始。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17631680
复制相关文章
相似问题
腾讯云开发者
