javascript - 图像弹出在一个稳定的位置

Question

使我的弹出图像显示在屏幕左侧的正确语法是什么？

jQuery

$("#qm3").mouseover(function(){
    $("#osf").show();
});
$("#qm3").mouseout(function(){
    $("#osf").hide();
});

HTML

<span><input type="text" id="tb1"><img id="qm3" src="images/WebResource.png"></img></span><span><img id="osf" src="images/osf.jpg" style="position: right; display:none;"></img></span>

截至目前，每当我将鼠标指向 qm3 时，都会显示弹出窗口，但它会影响我的页面定位。

http://codepen.io/anon/pen/vENZeK

Answer 1

这可以简化，如果你去掉跨度并在它周围包裹一个 div:

http://codepen.io/anon/pen/OPygOg

js

$(".show").hover(function(){
 $(this).next('img.hide').fadeToggle();
});

html

<div>
  <input type="text" id="tb1">
  <img class='show' src="http://placekitten.com/42/41"/>
  <img class="hide" src="http://placekitten.com/40/41"/>
</div>

CSS

div { postition:relative; padding-left:45px;}
.hide { display:none;  position:absolute; left:5px; }