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

我有以下代码可以工作

HTML

上面的方法很好用，只是我猜当它是a的时候，它并没有遵循它下面的规则。在本例中，“菜单容器”。在我正在编写代码的计算机上，它看起来很好。但当我在ipad或其他屏幕尺寸上看到它时，hover上显示的图像会根据ipad的屏幕尺寸移动38%

我有一个

#mainContainer{margin:auto；width:1000px；overflow:hidden；}

我是否可以将.缩略图范围保留在#main容器中，而不在它喜欢的任何地方流出

非常感谢你们

---

你有很多选择。a） 取决于渲染设备的多个样式表；b） CSS计算屏幕大小和缩略图的位置和位置；c） JS/jQuery计算屏幕大小和缩略图的位置。谢谢devlshone，但是有没有一个简单的enuf解决方案，不让这些替代方案进一步复杂化问题？我一直在寻找Jquery解决方案，但看起来它们不像浮点数那样工作——它们将div向下推，而不是浮点数。谢谢

<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>

#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;}