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