jquery - Chrome/Opera jquery css 显示不工作

Question

每当用户点击某些 html 元素时，我想显示一条 float 文本消息；代码是

function avviso(el, e){   
    var y = e.pageY;
    var x = e.pageX;
    saved_state = classi[classi.length - 2]; 
    msg = $("#messagge");
    $(msg).css('display', 'block');
    $(msg).css('top', y-80).css('left', x);
    $( "<p>\""+el.textContent+"\"</p>").appendTo(msg);
}

像这样附加到元素上:

$(span).on("click tap", function(event){
      var element = this;
      avviso(element, event);
 }).mouseleave(function(){
      $("#messagge").css('display', 'none');
      $("#messagge").children().remove();
 });

其中 span 是要单击的元素，“#messagge”是应该出现的文本消息的 id，使用以下 css 属性初始化:

    var n= $("<div id='messagge'></div>");
    var styles = {
            "display" : "none",
            "position":"absolute",
            "background-color":"#fff",
            "border":"1px solid #000",
            "padding":"5px",
            "max-width":"200px",
            "color":"black",
            "font-size":"10px",
        }
        $(n).css( styles );
        $(n).appendTo($("body"))

现在，除了 chrome 和 Opera 之外，所有浏览器都可以正常工作，消息不会出现。如果我在鼠标离开时没有将显示属性更改为“无”，则在我单击的位置会出现一个白色的小方 block ，但里面没有文本。我认为它与 .css("display", "block") 有关，但我不太确定(如果标题与我的问题不符，抱歉)。也许我遗漏了一些可移植性问题？

Answer 1

我建议问题是这样的:当您单击 span 元素时，消息出现在鼠标指针下方，立即触发隐藏消息的 mouseleave 事件。尝试注释掉 mouseleave 事件回调以查看是否是问题所在。也可以在此处使用顶部/左侧值:

$(msg).css('top', y-80).css('left', x);

向 x/y 添加或删除一些值，以确保带有消息的 div 不会出现在光标下。