Javascript 悬停函数

Question

我正在用 javascript 试用 raphael 并试图掌握它的窍门。目前我正在尝试获取它，以便当用户将鼠标悬停在我绘制的 raphael 中的圆上时，它会创建一个简单的悬停消息，如 hi。但是我在这部分坚持到尽头，我似乎无能为力，对此有任何帮助都会很棒。

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"});
};

HTML

<div class= "bot">
    <p>Hi there</p>
</div>

Answer 1

只需使用 Element.hover() 函数，如 Raphael website 中所述.

更新:如果您将下面发布的代码片段复制到您自己的计算机上并在本地运行，它就可以工作。但是，要在 Stack Overflow 上实际运行此代码段，它仅适用于某些浏览器(例如，它适用于 Firefox，但不适用于 Chrome)，这可能是由于不同的浏览器允许或不允许代码片段加载外部库，例如 Raphael .js，根据此代码片段的要求。

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");
}

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<div class="bot">
  <p>Hi there</p>
</div>