我正在尝试创建一个元素,当鼠标悬停在其上时,它的图像会发生变化,并且它的位置也会相应地进行调整。然而图像在改变,但 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;
}
你能看出我哪里错了吗?为什么?
最佳答案
是否已将新的评论范围添加到文档中?
由于我们没有您的其余 HTML/CSS/代码,我不知道这些是否是唯一的问题,但我建议使用 $(this) 并在 removeClass() 中传递一个参数:
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()。它说您需要一个或多个类(class)。
此外,如果单位是 px,offset() 方法不需要单位。
您可能还想看看 toggleClass("a", "b") ,这使得交换两个类变得容易。
关于jquery - 如何在嵌套的 jQuery 函数中更改 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6974721/