将鼠标悬停在 Raphael 元素上时更改光标

Question

Raphael 元素是动态创建的（响应用户输入，而不是在页面加载时）。当用户将鼠标悬停在对象上时，我想使用 Raphael 的 .hover() 方法将光标更改为 "pointer" （通常用于链接的手）。如何实现？

（我知道您可以使用 CSS 来实现这种效果，但是因为 DOM 元素是通过脚本创建的，而不是在加载时内置到页面中，所以我不知道这里能不能应用CSS，或者如果能应用会怎么样。）

http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=pointer

https://web.archive.org/web/20160121064823/http://raphaeljs.com/reference.html

Answer 1

看起来 "cursor" 实际上是可以用 Raphael 的 .attr() 函数修改的属性之一。所以，

el.hover(function(){el.attr({'cursor':'pointer'})}, 
  function(){el.attr({'cursor':'default'})}, el, el);

成功了。

Answer 2

var paper = Raphael("rect", 400, 400);
var hoverIn = function() {
 // if the context is not stated forcefully, this refers to the element in context.
  // can be any valid cursor types.
  this.attr({"cursor": "pointer"});
};

var hoverOut = function() {
  this.attr({"cursor": "default"});    
}
// simple click callback.
var clickFN = function (){
 alert('Hey you just clicked me :p, Thanks!!!')
};
var cItem = paper.rect(40,40,50,30)
  // attaching the hovering callbacks.
  .hover(hoverIn, hoverOut)
    // these are just additional cosmetics and fuctionalities.
  .attr({
        "fill": "#0ff000"
    })
    .click(clickFN);

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.1/raphael.min.js"></script>
<div id="rect"></div>

或者玩这个 fiddle!

嘿，在调用 .hover 函数时，第三个和第四个参数仍然是可选的，仅当您需要更改代码中的上下文时才使用。

Answer 3

直接为特定对象设置光标属性值。把事情简单化！ :)

var paper = Raphael("rect", 400, 400);
var myRectangle = paper.rect(40,40,50,30);

myRectangle.attr({
  'cursor':'pointer',
  "fill": "#0ff000"
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.1/raphael.min.js"></script>
<div id="rect"></div>

将鼠标悬停在 Raphael 元素上时更改光标

Change cursor on hovering over a Raphael element

javascript

css

raphael