我已经用 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;
}
如有任何帮助,我们将不胜感激。
最佳答案
要使放大的图像出现在可滚动区域的顶部/外部,它实际上必须在它的外部。
要使放大的图像显示在外部,当鼠标悬停在可滚动区域内部的缩略图上时,您需要在 HTML 之上使用 JavaScript,并且CSS。
这是 an example on jsfiddle ,其中我没有更改您的 HTML 结构。相反,当您将鼠标悬停在缩略图上时,我使用 jQuery 克隆可滚动区域外的放大图像并将其附加到 #example1 div。
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() 值将放大的图像直接定位在它的顶部。您可能想要稍微移动一下,但希望这足以让您开始。
关于javascript - 水平滚动图像缩略图并在鼠标悬停时弹出图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17631680/