Question

我使用的是Raphael图形和动画，这是一个javascript库。我希望用户将鼠标悬停在底行中间栏的蓝色方块上。当他们鼠标悬停时，我希望蓝色框发光（拉斐尔功能）黑色。我试图在rec8上使用这个函数，但我不认为我做得对。有人可以请更正我的代码或帮助我。谢谢。 :) Live Long and Prosper。

<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>

<style type="text/css"> 
#input
{
margin-top:-200px;

}
</style>

</head>

<body>

<div id="draw-here-raphael" style="height: 400px; width: 400px; background: #666; z-index:0;">
</div>

<div id="input" style="z-index:99;" >
  <input type="text" value="0"; style="text-align:right;" /><br />
</form> 
  </div>

<script type="text/javascript">
//all your javascript goes here
$(function() {
var r = new Raphael("draw-here-raphael"),

    // Store where the box is
    position = 'left',

    // Make our pink rectangle
    rec = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});

    $("rect").mouseover(function(e) {
        $(this).attr({"fill": "red"});
        });
    $("rect").mouseout(function(e) {
        $(this).attr({"fill": "#fbb"});
    }); 
    //first column
    rec2 = r.rect(30, 80, 50, 40, 5).attr({"fill": "blue"});
    rec3 = r.rect(30, 130, 50, 40, 5).attr({"fill": "blue"});
    rec4 = r.rect(30, 180, 50, 40, 5).attr({"fill": "blue"});
    rec5 = r.rect(30, 240, 50, 40, 5).attr({"fill": "blue"});
    //second column
    rec6 = r.rect(90, 80, 50, 40, 5).attr({"fill": "blue"});
    rec2 = r.rect(90, 130, 50, 40, 5).attr({"fill": "blue"});
    rec7 = r.rect(90, 180, 50, 40, 5).attr({"fill": "blue"});
    rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
        $("rec8").mouseover(function(e) {
        $(this).glow({width:10});
        });
    $("rec8").mouseout(function(e) {
        $(this).glow({width:0});
    }); 
    //third column
    rec9 = r.rect(150, 80, 50, 40, 5).attr({"fill": "blue"});
    rec10 = r.rect(150, 130, 50, 40, 5).attr({"fill": "blue"});
    rec11 = r.rect(150, 180, 50, 40, 5).attr({"fill": "blue"});
    rec12 = r.rect(150, 240, 50, 40, 5).attr({"fill": "blue"});
});

</script>

</body>
</html>

Answer 1

这个选择器：

$("rec8")

是任何<rec8 />标记的jQuery选择器。那些可能不存在。您应该将鼠标事件附加到返回的raphael元素：

rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
rec8.mouseover(function(e) {
    this.glow({width:10});
    });
rec8.mouseout(function(e) {
    this.glow({width:0});
});

但出于某种原因，当我鼠标移除时它不会消失

这是因为glow返回一个代表发光的新集合，因此您需要将其删除。来自Raphael documentation：

注意：Glow未连接到元素。如果更改元素属性，则不会自行调整。

您需要跟踪Raphael为您提供的返回set作为发光的一部分，并将其删除。也许是这样的：

var rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
var rect8glow;
rec8.mouseover(function(e) {
    rect8glow = this.glow({width:10});
    });
rec8.mouseout(function(e) {
    rect8glow.remove();
});

您可以看到here的工作演示。

Answer 2

请参阅此小提琴，了解实时解决方案：http://jsfiddle.net/zhj2r/3/
正如vcsjones所说，你将jquery和raphael结合起来，但它们没有关系通过$(this)将raphael对象包装在jquery函数调用中，这是错误的，$('rec4')不是有效的jquery选择器。
此外，glow函数返回一组显示目标对象的svg路径，因此通过调用glow({width : 0})，您不会修改实际的辉光宽度，而是生成另一个具有宽度的辉光元素0
以下是为了使代码正常工作而修改的内容：

rec.mouseover(function(e) {
    this.attr({"fill": "red"});
});
rec.mouseout(function(e) {
    this.attr({"fill": "#fbb"});
}); 
// ...
rec8.mouseover(function(e) {
    // keep a reference to the glow object so you can remove it later
    this.theGlow = this.glow({width:10});
});
rec8.mouseout(function(e) {
    this.theGlow.remove();
});

鼠标悬停功能无效

2 个答案: