Make a div popup on mouseeenter (working example inside) asking for code optimization

Question

Hi guys, I'm bulding a brand new site for the disco I work for.

Please take a look on the guests page: http://www.jubileegroup.it/jubilee/guests.php

I've been able to get the exact effect I wanted when the pointer moves on a picture, but I think my code is really...bad... I'm sure there must be something cleaner.

I'm using this in jQuery ready():

$(".oneguest").bind("mouseenter", function () {
 //get the actual coords of the div
 var coord = $(this).position();
 //show guest's name
 $(".guestname", $(this)).show('slow');
 //I create another div with id = tempguest to make the other divs not to move!
 $(this).after("<div class='oneguest' id='tempguest'></div>");
 //check if this is the fifth element of the row (.norm = no right margin)
 if ($(this).hasClass('norm')) {
  $("#tempguest").addClass('norm');
 }
 //I convert the div in an absolute positioned div and place it perfectly centered with his older position
 $(this).css("width", "246px");
 $(this).css("height", "300px");
 $(this).css("border", "5px solid #ddd");
 $(this).css("top", (coord.top - 66) + "px");
 $(this).css("left", (coord.left - 39) + "px");
 $(this).css("position", "absolute");
 $(this).css("z-index", "100");
});
//on mouseleave I destroy the "placeholder" div (id=tempguest) and reconvert the div to non-absolute.
$(".oneguest").bind("mouseleave", function () {
 $("#tempguest").remove();
 $(".guestname", $(this)).hide('fast');
 $(this).css("width", "176px");
 $(this).css("height", "176px");
 $(this).css("border", "1px solid #ddd");
 $(this).css("top", "");
 $(this).css("left", "");
 $(this).css("position", "inherit");
 $(this).css("z-index", "1");
});

Like I said the effect works, but I think my solution isn't pretty at all! What do You think?

Answer 1

The main cleanup would be that .css() can take an object and .hover() as a shortcut for mouseenter and mouseleave, like this:

$(".oneguest").hover(function () {
    var coord = $(this).position();
    $(this).find(".guestname").show('slow');
    $(this).after("<div class='oneguest' id='tempguest'></div>");

    if ($(this).hasClass('norm')) 
       $("#tempguest").addClass('norm');

    $(this).css({ width: "246px", 
                  height: "300px", 
                  border: "5px solid #ddd", 
                  top:  (coord.top - 66) + "px", 
                  left: (coord.left - 39) + "px", 
                  position: "absolute", 
                  z-index: "100" });
}, function () {
    $("#tempguest").remove();
    $(this).find(".guestname").hide('fast');    
    $(this).css({ width: "176px", 
                  height: "176px", 
                  border: "1px solid #ddd", 
                  top:  "", 
                  left: "", 
                  position: "inherit", 
                  z-index: "1" });
});

There's not much to be done in terms of optimization here, but does make it a bit prettier.