javascript raphael对象函数传递

Question

我很抱歉提出这个问题，但我只是在今天上午寻找一些指导。我只是想创建一个函数，这样我就可以通过传入该元素来使Raphael元素发光。以下是我的代码。为什么这不起作用？

var paper = Raphael("playarea", 500, 500); 

var rectangle = paper.rect(100, 100, 200, 200, 4); 

function elemHover(var el) 
{ 

    el.hover(
    // When the mouse comes over the object // 
    // Stock the created "glow" object in myCircle.g 
    function() { 
    this.g = this.glow({ 
     color: "#0000EE", 
     width: 10, 
     opacity: 0.8 
    }); 
    }, 
    // When the mouse goes away // 
    // this.g was already created. Destroy it! 
    function() { 
    this.g.remove(); 
    }); 
} 

elemHover(rectangle); 

这里是小提琴http://jsfiddle.net/aZG6C/15/

Answer 1

你应该fill元素（在本例中的矩形）来触发悬停。

rectangle.attr("fill", "red"); 

试试这个小提琴http://jsfiddle.net/aZG6C/17/

完整的代码看起来像

<div id="playarea"></div> 

​<script type="text/javascript"> 
var paper = Raphael("playarea", 500, 500); 

var rectangle = paper.rect(100, 100, 200, 200, 4); 

function elemHover(el) 
{ 
    el.hover(
    // When the mouse comes over the object // 
    // Stock the created "glow" object in myCircle.g 
    function() { 
    this.g = this.glow({ 
     color: "#0000EE", 
     width: 10, 
     opacity: 0.8 
    }); 
    }, 
    // When the mouse goes away // 
    // this.g was already created. Destroy it! 
    function() { 
    this.g.remove(); 
    }); 
} 

rectangle.attr("fill", "red"); 

elemHover(rectangle); 

</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

更新如果元素被填充了时才会触发

悬停事件。如果你想有一个透明的元素，您可以尝试

rectangle.attr("fill", "transparent"); 

检查小提琴这里http://jsfiddle.net/aZG6C/20/