Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

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

In lại Tác giả: Walker 123 更新时间：2023-11-28 13:26:13 29 4
mua khóa gpt4 Nike

我有以下html

CSS

   .banner_area_internal {
margin-top:10px;
chiều rộng: 100%;
height:250px;}

   .banner_wrapper_internal {
height:250px;
chiều rộng: 1000px;
margin:0 auto}

   .banner_wrapper_internal p {
font-size:30px;
color:#ffffff;
độ dày phông chữ: đậm;
margin:0px 300px;
display:block}

   .internal_banner {
vị trí: tương đối;
top:-235px;
left:15px;
z-index:-2;
}

   .internal_banner_overlay {
vị trí: tuyệt đối;
top:-25px;
left:15px;
z-index:-2;
}

    #overlay{
vị trí: tuyệt đối;
tràn:ẩn;
width:340px;
chiều cao: 200px;
chỉ số z:-1;
border:2px #aeaeae solid;
     }

    #overlay_field
   {
vị trí: tương đối;
chiều rộng: 1000px;
height:250px;
tràn:ẩn;
    }

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

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

câu trả lời hay nhất

只需在上部 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;
chiều rộng: 100%;
height:250px;}
   .banner_wrapper_internal {
height:250px;
chiều rộng: 1000px;
margin:0 auto}
   .banner_wrapper_internal p {
    font-size:30px;
    color:#ffffff;
    độ dày phông chữ: đậm;
    margin:0px 300px;
    hiển thị:khối;
}
   .internal_banner {
vị trí: tương đối;
top:-235px;
left:15px;
z-index:-2;
}

   .internal_banner_overlay {
vị trí: tuyệt đối;
top:-25px;
left:15px;
z-index:-2;
}

    #overlay{
vị trí: tuyệt đối;
tràn:ẩn;
width:250px;
height:250px;
border:2px #0000bb solid;
     }

    #overlay_field
   {
vị trí: tuyệt đối;
chiều rộng: 1000px;
height:250px;
tràn:ẩn;
    }
    #temp{position:absolute;}

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

关于javascript - Absolute Positioned img inside absolute div doesn't position as expected，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14151735/

29 4 0
Đề xuất bài viết: javascript - 未链接到 html 页面的本地 CSS 和 JS 文件
Đề xuất bài viết: css - CSS 生成的内容只针对文本吗？
Đề xuất bài viết: image - 像素值是否更适合约束照片容器？
Đề xuất bài viết: javascript - jQuery 延迟 - 当多个超时任务完成时
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress