javascript - Absolute Positioned img inside absolute div doesn't position as expected

Question

我有以下html

   <div class="banner_area_internal">
    <div class="banner_wrapper_internal" id="overlay_field">
        <img src="images/internal_banner_holder.png" />
        <img class="internal_banner" src="images/about-banner.jpg" />
        <div id="overlay">
        <img class="internal_banner_overlay" src="images/about-banner_hover.jpg" />
        </div>
    </div>
    </div>

CSS

   .banner_area_internal {
margin-top:10px;
width:100%;
height:250px;}

   .banner_wrapper_internal {
height:250px;
width:1000px;
margin:0 auto}

   .banner_wrapper_internal p {
font-size:30px;
color:#ffffff;
font-weight:bold;
margin:0px 300px;
display:block}

   .internal_banner {
position:relative;
top:-235px;
left:15px;
z-index:-2;
}

   .internal_banner_overlay {
position:absolute;
top:-25px;
left:15px;
z-index:-2;
}

    #overlay{
position:absolute;
overflow:hidden;
width:340px;
height:200px;
z-index:-1;
border:2px #aeaeae solid;
     }

    #overlay_field
   {
position: relative;
width:1000px;
height:250px;
overflow:hidden;
    }

以及@rkw 提到的以下脚本

    $(document).ready(function() {

 $("#overlay_field").hover(function(){


$("#overlay").show(); //Show tooltip
}, function() {
    $("#overlay").hide(); //Hide tooltip
})

  $('#overlay_field').mousemove(function(e){
$("#overlay").css({left:e.pageX-360, top:e.pageY-280});
  });

  }); 

我在这里想要达到的效果是:

图像显示为横幅“internal_banner”

当鼠标悬停在该图像(或更确切地说“overlay_field”)上时，会出现一个跟随鼠标的小 div。现在 div 的内容是另一个图像“internal_banner_overlay”

我希望这张图片的位置与“internal_banner”完全相同，即保持在同一个位置，这样看起来就像鼠标让您看到另一张底层图片。问题是图像不会停留在一个地方，它位于 div 内并随鼠标而不是文档移动，即使它的位置设置为绝对。

简单来说，当鼠标移到横幅区域时，它应该看起来像光标变成了一个小方框，让您可以透过横幅看到另一张图片。

Answer 1

只需在上部 div 中添加临时横幅并更改其在鼠标悬停和鼠标移出事件上的不透明度。

<div class="banner_area_internal">
    <div class="banner_wrapper_internal" id="overlay_field">
        <img src="abcd.png" />
        <img class="internal_banner permBanner" src="permBanner.png" />
        <img alt="" src="tempBanner.jpg" id="temp" style="height: 250px; width: 1000px; opacity: 0; position: absolute">
    </div>
</div>

JS:

   $(document).ready(function() {

 $("#overlay_field").hover(function(){


$("#overlay").show(); //Show tooltip
}, function() {
    $("#overlay").hide(); //Hide tooltip
})

  $('#overlay_field').mousemove(function(e){

  var width = 250;
  var height = 250;
  var left = parseInt(e.pageX)-parseInt(pageXOffset);
  var top = parseInt(e.pageY)-parseInt(pageYOffset);
  var a = document.getElementById("temp");
  a.style.opacity = 1;
  a.style.left = "0px";
  a.style.top = "0px";
  a.style.clip = "rect("+top+","+(left+100)+","+(top+100)+","+left+")";

  });
});

风格

 .banner_area_internal {
margin-top:10px;
width:100%;
height:250px;}
   .banner_wrapper_internal {
height:250px;
width:1000px;
margin:0 auto}
   .banner_wrapper_internal p {
    font-size:30px;
    color:#ffffff;
    font-weight:bold;
    margin:0px 300px;
    display:block;
}
   .internal_banner {
position:relative;
top:-235px;
left:15px;
z-index:-2;
}

   .internal_banner_overlay {
position:absolute;
top:-25px;
left:15px;
z-index:-2;
}

    #overlay{
position:absolute;
overflow:hidden;
width:250px;
height:250px;
border:2px #0000bb solid;
     }

    #overlay_field
   {
position: absolute;
width:1000px;
height:250px;
overflow:hidden;
    }​
    #temp{position:absolute;}

备用: 或者，您可以在鼠标悬停和鼠标移出事件中添加和删除临时横幅。