4

好的，所以我想让 div '.prodimg' 跟随鼠标位置。这有效，除了它相对于#wrapper 的左位置定位，它是'.details' 和'.prodimg' 的父div。为什么会这样？有什么建议可以修复它或跟踪鼠标的替代方法吗？

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

我已经尝试使用 '#wrapper' position:relative 并且没有任何改变。'.details' 必须是相对的，以便它可以内联浮动。我在包装器下面输入了 jquery。我试过用'document'代替'window'。不知道这是否与它有关...请帮助！我在这个问题上损失了将近 3 个小时：/

这是我的小提琴：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;
}
4

2 回答 2

3

绝对定位元素的topandleft属性是相对于该元素的第一个非静态定位祖先的，因此（根据您网页上的代码）.prodimg将相对于#wrapper

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

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>

于 2012-08-16T02:33:48.420 回答
0

你有没有研究offset过 jQuery 是如何工作的？您可以在此处找到更多信息：http: //api.jquery.com/offset/。这可能有助于解决您的问题。是否可以将相关内容放入 jsFiddle 以更轻松地为您提供帮助？

jquery 有一些关于鼠标位置如何工作的很好的文档：http://docs.jquery.com/Tutorials: Mouse_Position

我刚刚在这里的一个类似问题中找到了一个很好的解释：jQuery get mouse position within an element。希望这有助于回答您的问题。

于 2012-08-16T02:15:04.937 回答