0

我有以下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 内并随着鼠标而不是文档移动，即使它的位置设置为绝对。

简而言之，当鼠标移到横幅区域上时，它应该看起来像光标变成了一个小框，让您可以通过横幅看到另一个图像。

4

1 回答 1

0

只需在上部 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 事件上添加和删除临时横幅。

于 2013-01-04T06:59:12.710 回答