Question

由于jQuery的hover（）函数，我在Raphael画布上得到了一些文本剩余部分。当我将鼠标悬停在圆圈上时，我基本上希望文本出现，然后保证一旦我停留在圆圈上方它就会消失（hoverOut（））。

正如您在下面看到的，我尝试删除（）hoverOut（）上的文本，但它没有完成任务。但是，它适用于删除矩形。是否与get（）请求占用了太多时间有关？

node = paper.circle(value.xpos_init, value.ypos_init, node_rad).attr({"fill": "#ff0000"})
       .hover(function(e){
                posx = e.pageX - $('#canvas').offset().left;
                posy = e.pageY - $('#canvas').offset().top; 
                createMenu(posx,posy,"10");
              },
              function(){
                menu.remove();
                menu_deg_cent_text.remove();
              });

function createMenu(x,y,id_in)
{
  menu_x = 100;
  menu_y = 60;
  menu = paper.rect(x,y,menu_x,menu_y).attr({"fill":"white","stroke":"red"});
  $.get("../php/text.php", {id : id_in},
    function(data){
    menu_deg_cent_text = paper.text(x+(menu_x/2),y+(menu_y/2),"test_text");
  });
}

Answer 1

我强烈建议使用原生Javascript，而不是使用Raphael制作工具提示框。浮动元素可以更好地处理样式和包装文本等内容。

node = paper.circle(100, 100, 50).attr({"fill": "#ff0000"})
    .hover(function(e) {
        //if you want to calculate position by mouse
        //posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        //posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop-15;
        posx = this.attr('cx');
posy = this.attr('cy') - this.attr('r');        
        document.getElementById("tip").style.top = posy + "px";
        document.getElementById("tip").style.left = posx + "px";
        document.getElementById("tip").style.display = "block";
    }, function(e) {
        document.getElementById("tip").style.display = "none";
});

此处的演示演示：http://jsfiddle.net/jLSUa/1/

至于在鼠标悬停事件中放置一个AJAX调用：看起来非常不明智。你能提前加载鼠标悬停文本吗？

徘徊太慢了

1 个答案: