好的,所以我想让 div '.prodimg' 跟随鼠标位置。这有效,除了它相对于#wrapper 的左侧位置定位,#wrapper 是'.details' 和'.prodimg' 的父div。为什么会这样?有任何修复它的建议或跟踪鼠标的替代方法吗?
'.prodimg' 顶部位置是相对于#wrapper 顶部的,然后我将其更改为 padding-top 并更正了 .prodimg。这与我的问题有关,但我找不到左侧位置的类似解决方案。理想情况下,我不必更改包装器即可使 pageX 和 pageY 与整个窗口相关。
我已经尝试使用“#wrapper”position:relative并且没有任何改变。 '.details' 必须是相对的,以便它可以内联 float 。我在包装器下面输入了 jquery。我试过使用“文档”代替“窗口”。不确定这是否与它有关......请帮忙!我在这个问题上浪费了将近 3 个小时:/
这是我的 fiddle :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;
}
最佳答案
绝对定位元素的 top
和 left
属性是相对于元素的第一个非静态定位的祖先元素的,因此(来自您网页上的代码) .prodimg
将相对于 #wrapper
您可以使用固定位置元素和客户坐标(即 clientX ,clientY)代替
$(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>
关于jquery - 为什么 pageX 和 pageY 是相对于 wrapper 而不是 document?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11979784/