如何更改嵌套jQuery函数中的CSS

Question

I'm trying to create an element which when the mouse is over its image changes and it's position is adjusted accordingly. However the image is changing but the css position isn't changing.

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;
}

Can you see where i'm going wrong and why?

Answer 1

Has the newComment span been added to the document?

Since we don't have the rest of your HTML/CSS/code, I don't know if these are the only issues, but I would suggest using $(this) and passing a parameter in 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" 
            });                      
        });   

I don't see in the jQuery documentation where you can call removeClass() with no parameters passed. It says you need one or more classes.

In addition the offset() method does not need units if the units are px.

You may also want to look at toggleClass("a", "b") , which makes it easy to swap two classes.

Answer 2

Did you position the element newComment absolute ? You can't use top and left if the element is positioned static .

If you didn't, try this instead of your current .css :

.css({
      'top': (yOffset * 100) + 175 + "px",
      'left': (xOffset * 75) + 40 + "px",
      'position': 'absolute'
})

By the way: You don't have to pass the name of the css property as a string, when you write in DOM like. So this should work just the same:

.css({
     top: (yOffset * 100) + 175 + "px",
     left: (xOffset * 75) + 40 + "px",
     position: 'absolute'
})

Answer 3

remove the "px" at the end of the offset object parameter ;)

.offset({
                'top': yOffsets[newComment.id] + 175 - 1250,// + "px",
                'left': xOffsets[newComment.id] + 40 - 1500// + "px"
            });

If the offset method does not recognize the left and top properties as a number, it does not update the element position.