Javascript悬停功能出现

Question

我知道当你将鼠标悬停在一个圆上时如何让一个框出现，但是它很大，在我看来它会破坏体验。这是一个警报。我希望它是一个较小的盒子，当您悬停时它只会出现在圆圈上方，而不是一个很大的盒子，如果您明白我的意思的话。但是我不确定如何实现这一点。任何帮助都会很棒

Knockout JS 2.0.0

window.onload = function() {
  var paper = new Raphael(0, 0, 400, 400);
  var backGround = paper.rect(0, 0, 400, 400);
  backGround.attr({
    fill: "orange"
  });
  var face = paper.circle(200, 200, 100);
  face.attr({
    fill: "Red"
  });
  face.hover(hoverHandler);
};

function hoverHandler() {
  alert("hi");
}

因此，当用户将鼠标悬停在红色圆圈上时，我希望在其上方出现一个小框并打个招呼

谢谢

编辑 : JSFiddle

Answer 1

您可能需要 fiddle 确定要放置元素的位置，但这应该能让您朝着正确的方向前进。您可能面临的主要问题是您的回调在加载函数调用之外，因此如果您尝试将纸质对象传递给回调函数，它会返回未定义的。

这是另一个关于使用 Raphael 添加文本的好文章 answer。

实例：http://codepen.io/larryjoelane/pen/LGKxeR

Raphael/JavaScript代码：

     window.onload = function() {

  var paper = new Raphael(0, 0, 400, 400);

  var backGround = paper.rect(0, 0, 400, 400);

  backGround.attr({
    fill: "orange"
  });
  var face = paper.circle(200, 200, 100);
  face.attr({
    fill: "Red"
  });

  face.hover(hoverHandler);


  //Moved this inside of the onload event
  function hoverHandler() {

    //create the alert
    var alert = paper.rect(175, 175, 50, 50);

    alert.attr({

      fill: "blue"

    });

    //add the text

    var text = paper.text(200, 200, "Hi!");

    //add some attributes
    text.attr({
      "font-size": 22,
      "font-family": "Arial, Helvetica, sans-serif"
    });

  }

};

Answer 2

那是你想要的，你应该调用该函数（例如，匿名）并将你的 bar 传递给它来修改它的属性。然后，在鼠标 hover 上，条形图出现在圆圈上。

window.onload = function() {
  var paper = new Raphael(0, 0, 400, 400);
  var face = paper.circle(200, 200, 100);
  face.attr({
    fill: "Red"
  });
  var backGround = paper.rect(150, 150, 100, 100);
  backGround.attr({
    fill: "",
    "stroke-width": 0
  });
  face.hover(function(){hoverHandler(backGround)});
};

function hoverHandler(l) {
  alert("hi");
  l.attr({
    fill: "orange"
  });
}

http://jsfiddle.net/fkL0ug3h/

Javascript悬停功能出现

Javascript hover function to appear

html

javascript

css

jquery

hover

Knockout JS 2.0.0