jquery - 在鼠标上显示图像在另一个图像 css 或 jquery 选项上？

Question

我有以下有效的代码。

HTML

<div id="menuContainer">
        <div id="menu3"><a class="thumbnail" href="business_two.html"><img src="images/ncb_integrate_business_one_menu3.jpg" width="126" height="45" />
        <span><img src="images/ncb_integrate_business_drop.png" width="164" /></span></a></div>
</div>

和 CSS

#menu3 { width:126px; height:45px; float:left; }

.thumbnail {
    zoom:1.0;
    position:relative;
    text-decoration:none;
}
.thumbnail span {
position:fixed;
    top:150px;
    left:500px;
    width:350px;
    left:-999em;
    z-index:990    
}
.thumbnail:hover {visibility:visible; }
.thumbnail:hover span { left:38%; opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */ }
* html .thumbnail span {position:absolute;}

以上工作正常，只是当它的ai猜测它不遵循其下的规则时。在这种情况下，“menuContainer”。在我正在编码的计算机上看起来不错。但是当我在 ipad 或其他屏幕尺寸上看到它时，显示悬停的图像会根据 ipad 屏幕尺寸移动 38%。

我有一个#mainContainer { margin: auto; width: 1000px; overflow:hidden; } 我可以将 .thumbnail 跨度保留在 #mainContainer 内并且不会流出它喜欢的任何地方吗？

谢谢百万人 G