程序员经验分享-hwhale

为什么 pageX 和 pageY 与包装器相关，而不是与文档相关？

2024-04-23

好的，所以我想让 div '.prodimg' 跟随鼠标位置。这是可行的，只不过它是相对于 #wrapper 的左侧 pos 定位的，#wrapper 是“.details”和“.prodimg”的父 div。为什么会发生这种情况？有什么建议来修复它或跟踪鼠标的替代方法吗？

'.prodimg' 顶部位置相对于 #wrapper 顶部，然后我将其更改为 padding-top 并更正了 .prodimg。这与我的问题有关，但我找不到左侧位置的类似解决方案。理想情况下，我不必更改包装器即可使 pageX 和 pageY 与整个窗口相关。

我尝试过使用“#wrapper”位置：相对，但没有任何改变。 “.details”必须是相对的，以便它可以内联浮动。我将 jquery 输入到了我的包装器下面。我尝试过使用“文档”代替“窗口”。不确定是否与此有关...请帮忙！我在这个问题上浪费了将近 3 个小时：/

这是我的小提琴：http://jsfiddle.net/vg2zL/ http://jsfiddle.net/vg2zL/

$(document).ready(function() {
var mouseX;
var mouseY;
$(window).mousemove( function(e) {
 mouseX = e.pageX; 
 mouseY = e.pageY;
});  
$(".details").hover(
  function () {
$(this).children(".prodimg").css("visibility","visible");
$(window).bind('mousemove', function(e){
    $(".details").children(".prodimg").css({'top':mouseY,'left':mouseX});
});
 },
  function () {
    $(".prodimg").css("visibility","hidden");

   });
});

这是我的风格

#wrapper {
 width: 700px;
 padding-top: 130px;
 position: absolute;
 left:50%;
 margin-left: -351px;
 font-size: 30px;
 font-family: 'cmu_serifroman';
}

.details {
 text-align:center;
 width:200px;
 display:inline-block;
 line-height:40px;
 margin-right:50px;
 cursor:pointer;
}

.prodimg {
 visibility:hidden;
 position:absolute;
 z-index:-1;
}

The top and left绝对定位元素的属性是相对于该元素的第一个非静态定位祖先的，因此（来自网页上的代码）.prodimg将相对于放置#wrapper

您可以使用固定位置元素和客户端坐标（即, clientY) 代替

http://jsfiddle.net/vg2zL/1/ http://jsfiddle.net/vg2zL/1/

$(document).ready(function() {
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
 mouseX = e.clientX; 
 mouseY = e.clientY;
});  
$(".details").hover(
  function () {
$(this).children(".prodimg").css("visibility","visible");
$(document).bind('mousemove', function(e){
    $(".details").children(".prodimg").css({'top':mouseY,'left':mouseX});
});
 },
  function () {
    $(".prodimg").css("visibility","hidden");

   });
});
#wrapper {
 width: 280px;
 padding-top: 130px;
 position: absolute;
 left:50%;
 margin-left: -141px;
 font-size: 10px;
 font-family: 'cmu_serifroman';
}

.details {
 text-align:center;
 width:60px;
 display:inline-block;
 margin-right:20px;
 cursor:pointer;
}

.prodimg {
 visibility:hidden;
 position:fixed;
 z-index:-1;
 background-color:blue;
 width:50px;
 height:50px;
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="details">
      <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  </a>
  <div class="prodimg"></div>
  </div>
  <div class="details">
      <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </a>
  <div class="prodimg"></div>
  </div>
      <div class="details">
      <a>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  </a>
  <div class="prodimg"></div>
  </div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery

css

Mouse

为什么 pageX 和 pageY 与包装器相关，而不是与文档相关？ 的相关文章

  • 是否可以通过 CSS 3 使用文本内容设置元素中文本的颜色？

    好吧 这更像是一个有很多非 CSS 解决方案的问题 但我希望更多地从理论角度来做这件事 我有一个它的应用程序 但不值得以任何其他方式对其进行编码 有趣的 问题 如何使用元素的文本为元素的文本着色 我有一个元素 全部都是它自己的 它将包含颜色

  • 右下角对齐的更好方法

    有没有更好的方法来对齐单元格右下角的某些内容 我有一个 div 只包含一个背景图像 10px x 10px 我使用以下样式将其放在右下角 我所在的单元格高 40 像素 这样做会导致我失去 div 上方的 30px 我还使用它作为单击的对象

  • 如何在没有 JQuery 的情况下模仿跨浏览器 $(document).ready() 行为[重复]

    这个问题在这里已经有答案了 可能的重复 document ready 相当于没有 jQuery https stackoverflow com questions 799981 document ready equivalent witho

  • 父级嵌入框阴影与子级 div 重叠

    我遇到一个问题 子级 div 与父级框阴影底部重叠 父级有一个 max height w overflow y 滚动 任何帮助都会很棒 https i stack imgur com jQe0r png https i stack imgu

  • 在 ajax 完成之前阻止提交

    我正在使用 jQuery 并且我希望在所有 ajax 调用完成之前表单提交不会起作用 我想到的一种方法是存储一个布尔值 该值指示是否有 ajax 请求正在进行 在每一个结束时它都会被设置为 false 我不确定这是否是最好的方法 所以我将不

  • 排除单个浏览器使用 CSS 类

    我想排除 Internet Explorer 使用特定的 CSS 类 这可能吗 Details 我有一个 css 类 看起来像 input type radio checked input type radio hover box shad

  • Ionic 2 占位符文本样式

    我正在使用 Ionic 2 rc0 开发一个应用程序 并且整个应用程序中有几个仍然需要样式设置的输入字段

  • 在jqGrid中查找当前页码

    如何在 jqGrid 中找到当前页码 当然使用 jQuery 另外我怎么知道总共有多少页 这应该可以做到 sp 1 text total pages ui pg input val current page Edit 我发现了一个更好的方法

  • jQuery 验证：如何不显示错误？或者如何将错误显示为工具提示？

    我希望我的错误浮动在未验证的输入字段上方 左对齐 我怎样才能做到这一点 如果不能 我怎样才能关闭错误 我仍然希望字段能够验证 并在错误时突出显示 但不希望显示实际的错误消息 我似乎无法在 jQuery 文档中找到任何可以让我打开 关闭它们的

  • 我的CSS出了什么问题？活动链接不改变颜色

    我无法让我的 WordPress 菜单活动链接保持红色 我添加了我认为与导航相关的 CSS 还有正文等 以防影响问题 感谢您的帮助 body font family Helvetica Neue sans serif font size 1

  • SASS如何在旋转body时使页面完整的高度和宽度？

    我必须旋转我的身体并做到这一点全高 and 全屏宽度 嗯 我用的是vh公制并且非常适合width但身高还是不太合适 我不得不旋转 90 度但是height and width仍然指相同的方向not rotate PS 我添加了 red以便更

  • jQuery 验证规则和消息 [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我在设置 jQuery 验证的规则和

  • Aptana Studio 3 上的预览选项卡在哪里？

    我在 Windows PC 上使用 Aptana Studio 2 并有一个选项卡用于在 IE 上预览页面 另一个选项卡用于在 Firefox 上预览 但我切换到了 Aptana 3 我不知道是没有预览还是我没有找到它 是的 我在 stac

  • 用数组反向查找对象

    假设我有一个这样的对象 resourceMap a 0 1 2 3 4 5 6 7 8 9 10 b 11 12 c 21 23 d 54 55 56 57 510 确定是否的最佳方法是什么resourceId 21将会 c 我们不知道钥匙

  • 将杂散文本包裹在 div 中

    如何选择 任何没有包含标签的内容 来在 jQuery 中添加包装器 前任 div class post div class whatever This should remain untouched div I want to wrap t

  • 如何将 Browserify 与外部依赖项一起使用？

    我正在尝试慢慢地将 Browserify 引入我的网站 但我不想重写所有 js 也不希望 jquery 和其他库的重复实例与我的 Browserify 版本捆绑在一起 如果我构建将 jquery 列为外部依赖项的模块 那么如何将其指向我的全

  • jQuery 选择下一个

    我有一个简单的div布局html 有一个函数 当鼠标悬停在className为 personal icon email 的div上时 我将调用JS函数并显示className为 img info mask 的隐藏div div class

  • 如何使 jQuery 向上动画

    我有一些 jquery 运行得相当好 但是当我将鼠标悬停在有问题的元素上时 底部向下扩展 这并不意外 但不是所需的效果 我希望元素的底部保持静止 而元素的顶部向上扩展 如果您想查看我目前拥有的内容 您可以导航至http demo ivann

  • Jquery，清除/清空 tbody 元素的所有内容？

    我认为这会相当简单 但似乎空方法无法清除我拥有的 tbody 如果有人知道执行此操作的正确方法 我将不胜感激 我只想删除 tbody 中包含的所有内容 到目前为止我正在尝试 tbodyid empty HTML table tbody tr

  • Jquery：选择菜单以显示和隐藏某些div元素

    我正在创建一个选择菜单 根据所选选项显示和隐藏某些 div 像这样的东西

随机推荐

热门标签