我有一个看起来像
的DOM外部导航100%x 100%
导航离开100%x 50%
导航右100%x 50%
结束外部导航
我已将此代码添加到每个
$("<img src='/img/next.png' id='next' alt='Next Image' style='display:none;'/>").appendTo(".image-nav .image-nav-right");
this.$('image-nav-right').mouseover(function() {
$(this).bind('mousemove', function(event){
$("#prev").hide();
$('#next').css({
left: event.pageX,
top: event.pageY,
position: "absolute",
display:"block",
"z-index":"30000"
});
});
});
$("<img src='/img/prev.png' id='prev' alt='Previous Image' style='display:none;'/>").appendTo(".image-nav .image-nav-left");
this.$('image-nav-left').mouseover(function() {
$(this).bind('mousemove', function(event){
$("#next").hide();
$('#prev').css({
left: event.pageX,
top: event.pageY-25,
position: "absolute",
display:"block",
"z-index":"30000"
});
});
});
所有容器都有一个绝对位置,左侧鼠标悬停工作非常好,但右侧鼠标悬停在右侧显示大约800px的屏幕。我不知道为什么,一切都在正常徘徊,我用控制台检查。
我以为pageX和pageY没有重置?或右图像不是绝对定位到div,而是定位到窗口..
有什么想法吗?
答案 0 :(得分:0)
首先......
this.$('image-nav-right')
和this.$('image-nav-left')
应该是
$('.image-nav-right')
和$('.image-nav-left')
(已移除this.
并将.
添加到班级选择器)
然后,你真的不需要mouseover
事件..直接绑定到mousemove
(否则你多次绑定mousemove
的事件处理程序搞砸了)
所以......更像是
$("<img src='/img/next.png' id='next' alt='Next Image' style='display:none;'/>").appendTo(".image-nav .image-nav-right");
$('.image-nav-right').bind('mousemove', function(event){
$("#prev").hide();
$('#next').css({
left: event.pageX,
top: event.pageY,
position: "absolute",
display:"block",
"z-index":"30000"
});
});
$("<img src='/img/prev.png' id='prev' alt='Previous Image' style='display:none;'/>").appendTo(".image-nav .image-nav-left");
$('.image-nav-left').mousemove(function(event){
$("#next").hide();
$('#prev').css({
left: event.pageX,
top: event.pageY-25,
position: "absolute",
display:"block",
"z-index":"30000"
});
});