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

【问题标题】：Change cursor on hovering over a Raphael element将光标悬停在 Raphael 元素上时更改光标
【发布时间】：2016-07-07 02:25:58
【问题描述】：

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

(我知道你可以使用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

【问题讨论】：

只是一个想法。您可以直接调用el.attr({cursor:'pointer'})，而不是创建事件处理程序。在悬停时设置和取消设置是没有意义的，因为它与您只是设置元素的默认光标相同。

标签： javascript css raphael

【解决方案1】：

看起来“光标”实际上是可以使用 Raphael 的 .attr() 函数修改的属性之一。所以，

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

成功了。

【讨论】：

【解决方案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 函数时，第三个和第四个参数仍然是可选的，仅在您需要更改代码中的上下文时使用。

【讨论】：

【解决方案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>

【讨论】：