我正在尝试创建一个元素,当鼠标悬停在其图像上时,它的位置会相应调整。然而,图像正在变化,但css位置没有变化。
的jQuery / JavaScript的:
var newComment = $('<span>').attr({'id': commentCount});
newComment
.addClass('comment')
.css({
'top': (yOffset * 100) + 175 + "px",
'left': (xOffset * 75) + 40 + "px"
})
.hover(function(){ //Hover over the comment
newComment
.removeClass()
.addClass('commentOver')
.offset({
'top': yOffsets[newComment.id] + 175 - 1250 + "px",
'left': xOffsets[newComment.id] + 40 - 1500 + "px"
});
},function(){ //Mouse leaves the comment
newComment
.removeClass()
.addClass('comment')
.offset({
'top': yOffsets[newComment.id] + 1750 + "px",
'left': xOffsets[newComment.id] + 400 + "px"
});
});
CSS:
.comment{
position: absolute;
z-index: 10;
padding: 0px;
width: 51px;
height: 70px;
background-image: url('../img/dropSmall.png');
font-weight:800;
}
你能看到我出错的地方吗?为什么?
答案 0 :(得分:0)
是否已将newComment范围添加到文档中?
由于我们没有剩余的HTML / CSS /代码,我不知道这些是否是唯一的问题,但我建议使用$(this)并在removeClass()中传递参数:< / p>
var newComment = $('<span>').attr({'id': commentCount});
newComment
.addClass('comment')
.css({
'top': (yOffset * 100) + 175 + "px",
'left': (xOffset * 75) + 40 + "px"
})
.hover(function(){ //Hover over the comment
$(this)
.removeClass("comment")
.addClass('commentOver')
.offset({
'top': yOffsets[newComment.id] + 175 - 1250,
'left': xOffsets[newComment.id] + 40 - 1500
});
},function(){ //Mouse leaves the comment
$(this)
.removeClass("commentOver")
.addClass('comment')
.offset({
'top': yOffsets[newComment.id] + 1750,
'left': xOffsets[newComment.id] + 400"
});
});
我没有在jQuery文档中看到你可以在没有传递参数的情况下调用removeClass()。它说你需要一个或多个班级。
此外,如果单位为px,则offset()方法不需要单位。
您可能还想查看toggleClass("a", "b"),这样可以轻松交换两个类。
答案 1 :(得分:0)
您是否定位了元素newComment
absolute
?
如果元素位于static
,则无法使用top和left。
如果您没有,请尝试此操作,而不是当前的.css
:
.css({
'top': (yOffset * 100) + 175 + "px",
'left': (xOffset * 75) + 40 + "px",
'position': 'absolute'
})
顺便说一下:当您在DOM中编写时,您不必将css属性的名称作为字符串传递。所以这应该是一样的:
.css({
top: (yOffset * 100) + 175 + "px",
left: (xOffset * 75) + 40 + "px",
position: 'absolute'
})
答案 2 :(得分:0)
删除偏移对象参数末尾的“px”;)
.offset({
'top': yOffsets[newComment.id] + 175 - 1250,// + "px",
'left': xOffsets[newComment.id] + 40 - 1500// + "px"
});
如果偏移方法无法将left
和top
属性识别为数字,则不会更新元素位置。