ラファエロ要素上にカーソルを置くと、カーソルが移動する

Question

ラファエロ要素は動的に作成されます（ページの読み込み時ではなくユーザーの入力に応じて）。私は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

Answer 1

「カーソル」のように見えるラファエロの.ATTR（）関数で変更することができるよりも、実際に属性の1つです。したがって、

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() { 
 
\t // 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(){ 
 
\t alert('Hey you just clicked me :p, Thanks!!!') 
 
}; 
 
var cItem = paper.rect(40,40,50,30) 
 
\t \t // attaching the hovering callbacks. 
 
\t \t .hover(hoverIn, hoverOut) 
 
    // these are just additional cosmetics and fuctionalities. 
 
\t \t .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番目と4番目のパラメータはオプションのままで、コード内のコンテキストを変更する必要がある場合にのみ使用されます。