Javascript悬停功能

Javascript hover function

本文关键字：功能 悬停 Javascript      更新时间：2023-09-26

我正在用JavaScript尝试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>

只需使用 Element.hover() 函数，如 Raphael 网站上所述。

更新：如果您将下面发布的代码片段复制到自己的计算机上并在本地运行，则可以使用。但是，要在 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>

相关文章：