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

图像弹出稳定的位置

1 个答案: