Chrome/Opera jquery css 显示不工作

Question

我想在用户点击某些 html 元素时显示一条浮动文本消息；代码是

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，没有出现消息。如果我没有在鼠标离开时将显示属性更改为“无”，我点击的地方会出现一个白色的小方块，但里面没有文字。 我认为它与.css（“display”，“block”）有关，但我不太确定（对不起，如果标题与我的问题不符）。也许我错过了一些可移植性问题？

Answer 1

正如 Serge Seredenko 在 cmets 中发现的那样，您使用 new 保留字来命名 var。这会自动引发语法错误。

我不认为你在任何浏览器或 JS 引擎中都能做到这一点。尝试将其更改为 _new 或类似的东西..

---

更新

随着那个 var 的改变，并删除了这个（我认为不相关的）行

saved_state = classi[classi.length - 2];

完美运行。这是一个 jsfiddle：https://jsfiddle.net/jormaechea/4b7r66vr/

Answer 2

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

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

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