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>

Javascript悬停功能

Javascript hover function

javascript

jquery

html

css

raphael