javascript - 在鼠标悬停时触发 'further information' div(有重叠)

Question

这是我想在鼠标光标悬停在图像上时实现的效果:

到目前为止，这是我的方法:

<div id="moviethumb2" class="moviethumb">
    <a onmouseover="javascript:mouseOverThumb(2)" href="movie.php?id=38055">
           <img src="img2.jpg">
    </a>
</div>
<div id="moviethumb3" class="moviethumb">                   
    <a onmouseover="javascript:mouseOverThumb(3)" href="movie.php?id=605">
           <img src="img3.jpg">
    </a>
</div>

但是我还没有想出一个非常简单的方法。 z-index 我试过用。

我的问题是，使用 css、jquery/javascript 实现上述效果的最简单方法是什么。我将不胜感激正确方向的指示，这样我就不会使这个问题过于复杂。

谢谢

Answer 1

一个经典但很好的例子，正是您正在寻找的东西。

教程 http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

演示 http://www.sohtanaka.com/web-design/examples/image-zoom/