jquery - 在 mouseeenter 上制作一个 div 弹出窗口(内部的工作示例)要求代码优化

Question

我正在为我工​​作的迪斯科舞厅建立一个全新的网站。

请看客人页面:http://www.jubileegroup.it/jubilee/guests.php

当指针在图片上移动时，我已经能够获得我想要的确切效果，但我认为我的代码真的......很糟糕......我确信必须有更干净的东西。

我在 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");
});

就像我说的效果一样，但我认为我的解决方案一点也不漂亮!你怎么看？

Answer 1

主要清理工作是 .css()可以带一个对象和.hover()作为 mouseenter 和 mouseleave 的快捷方式，如下所示:

$(".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" });
});

这里在优化方面没什么可做的，但确实让它更漂亮了。