绝对定位里面绝对格犯规位置IMG预期

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的内容是另一个图像“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;} 

备选： 或者你也可以添加和删除在鼠标悬停及移出事件临时旗帜。