將鼠標懸停在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元素上

回答

相關問題