将鼠标悬停在Raphael元素上

Raphael元素是动态创建的（响应用户输入，而不是页面加载）。我想使用Raphael的.hover（）方法在用户悬停在对象上时将光标更改为“指针”（通常用于链接的手）。这如何实现？（我知道你可以使用CSS来实现这种效果，但是因为DOM元素是通过脚本创建的，而不是在加载时被构建到页面中，所以我不知道CSS是否可以在这里应用，或者怎么会是如果可以）。将鼠标悬停在Raphael元素上

2016-07-07 DJG

只是一个想法。您可以调用'el.attr（{cursor：'pointer'}）'来代替创建事件处理函数。没有必要设置它并将其设置为悬停状态，因为它与您设置元素的默认光标相同。 – Dobz

貌似“光标”实际上是比用拉斐尔的.attr（）函数修改的属性之一。所以，

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

有窍门。

来源

2016-07-07 02:36:45 DJG

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函数时，第三个和第四个参数仍然是可选的，只有在需要更改代码中的上下文时才使用。

来源

2016-07-08 18:41:42 Ayan

将鼠标悬停在Raphael元素上

回答

相关问题