MouseOver事件和创建动态菜单Div使用jQuery

时间:2012-01-20 19:22:47

标签: jquery

我将onmouseover事件附加到图像上。 mouseover事件应该创建一个div并添加到放置图像的相同位置。 div用作浮动菜单div。我可以得到坐标,但出于某种原因,当我将div添加到文档时,我无法在任何地方看到div。

    $(actionImage).mouseover(function(e) {

            // get the coordinates
            var x = e.pageX - this.offsetLeft; 
            var y = e.pageY - this.offsetTop;

            var menuDiv = createMenuDiv();

            $(menuDiv).css(
                {   
                    position:"absolute",
                    top: y + "px",
                    left:x + "px"
                }
            );


            $(document).append(menuDiv);


        });


function createMenuDiv() {

    var menuDiv = document.createElement("div");
    $(menuDiv).css("background-color", "yellow");
    $(menuDiv).css("z-index", "99");


    var b = document.createElement("input");

    $(menuDiv).append(b);

//  var addButtonLabel = document.createElement("label");
//  $(addButtonLabel).text("Add");
//  
//  var deleteButtonLabel = document.createElement("label");
//  $(deleteButtonLabel).text("Delete");

//  $(menuDiv).append(addButtonLabel);
//  $(menuDiv).append(deleteButtonLabel);

    return menuDiv; 

}

1 个答案:

答案 0 :(得分:1)

应使用$('body').append(menuDiv);代替$(document).append(menuDiv);; http://jsfiddle.net/ZPh3U/