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.