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（“显示”，“块”）有关，但我不是很确定（对不起，如果标题与我的问题不符）。也许我错过了一些可移植性问题？

Answer 1

正如Serge Seredenko在评论中发现的那样，您使用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不会出现在光标下。

Chrome / Opera jquery css显示无法正常工作

2 个答案:

更新