Question

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

（我知道您可以使用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

看起来像＃34;光标＆＃34;实际上是使用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元素上时更改光标

3 个答案: