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中添加临时横幅，并在mouseover和mouseout事件中更改其不透明度。

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

<强>替代：或者，您可以在mouseover和mouseout事件上添加和删除临时横幅。

绝对div内的绝对定位图像未按预期定位

1 个答案: