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 之外，在所有浏览器中一切正常，消息不会出现。如果我不在鼠标离开时将显示属性更改为 "none"，则会在我单击的位置出现一个白色的小方块，但里面没有文本。我认为它与 .css("display", "block") 有关，但我不太确定（如果标题与我的问题不符，抱歉）。也许我遗漏了一些可移植性问题？

Answer 1

正如在评论中发现的那样，您正在使用 new 保留字来命名变量。这会自动引发语法错误。

我认为您没有在任何浏览器或 JS 引擎中实现此功能。尝试将其更改为 _new 或类似的东西..

更新

更改了那个 var，并删除了这一行（我认为不相关）

saved_state = classi[classi.length - 2];

效果很好。这是一个 jsfiddle：https://jsfiddle.net/jormaechea/4b7r66vr/

Answer 2

我认为问题是这样的：当你点击 span 元素时，消息出现在鼠标指针下方，立即触发隐藏消息的 mouseleave 事件。尝试注释掉 mouseleave 事件回调以查看是否是问题所在。也可以在这里玩 top/left 值：

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

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

Chrome/Opera jquery css 显示不工作

Chrome/Opera jquery css display not working

css

jquery

opera

google-chrome

更新