Jquery Raphael js单击、悬停并填充

我使用拉斐尔js绘制村庄平面图，平面图上的形状是村舍。当我在小屋里徘徊时，它们充满了色彩。当我点击一个小屋时，会出现一个小窗口来显示一些信息。当我把光标从窗口离开时，它就消失了。除了形状的填充之外，所有的工作都和我需要的差不多。当我离开文本窗口时，我需要形状的填充也消失。但它仍然存在。出于某种原因，它只适用于我添加的最后一座别墅。当窗户已经被隐藏的时候，其他的小屋都被颜色填满了

这是我的代码：

var canvas = Raphael(canvas_setup.canvas_id, canvas_setup.canvas_width, canvas_setup.canvas_height),
    speed_anim_in = 400,
    speed_anim_out = 150,
    cottage_color_start = '#fff',
    cottage_color_end = '#fff',
    cottages_array = [];

for (var i = village_area.length - 1; i >= 0; i--) {
    canvas.setStart();
    var obj = village_area[i];
    canvas.image(obj.plan_image, 0, 0, canvas_setup.canvas_width, canvas_setup.canvas_height);

    for (var j = 0; j < obj.cottages.length; j++) {
        var obj_cottages = obj.cottages[j],
        my_path = canvas.path(obj_cottages.coords);
            my_path
                .attr({stroke: "none", fill: cottage_color_start, "fill-opacity": 0.8, opacity: 0, cursor: "pointer"})
                .data('type', obj_cottages.type)
                .data('start_color', cottage_color_start)
                .data('end_color', cottage_color_end)
                .data('clicked', false)
                .hover(
                    function(){
                        this.attr({fill: this.data('start_color'), opacity: 1}).animate({fill: this.data('end_color')}, speed_anim_in);
                    },
                    function(){
                        if(!this.data('clicked')) {
                            this.animate({fill: this.data('start_color'), opacity: 0}, speed_anim_out);
                        }
                    }
                )
                .click(function (e) {
                    this.attr({fill: this.data('start_color'), opacity: 1});
                    this.data('clicked', true);
                    $('.cottage_info').html(
                        '<div>Cottage ' + this.data('type') + '</div>'
                    ).show();
                    $('.cottage_info').css({'left': e.pageX-44 + 'px', 'top': e.pageY-150 + 'px'});
                    $('.cottage_info').mouseleave(function() {
                        $(this).hide();
                        my_path
                            .attr({stroke: "none", fill: cottage_color_start, "fill-opacity": 0.8, opacity: 0, cursor: "pointer"})
                            .data('clicked', false)
                        this.animate({fill: this.data('start_color'), opacity: 0}, speed_anim_out);
                    });
                    return false;
                });
    };
    cottages_array.push(canvas.setFinish());

var canvas=Raphael（canvas\u setup.canvas\u id、canvas\u setup.canvas\u width、canvas\u setup.canvas\u height），
速度动画英寸=400，
速度=150，
小屋(颜色)(开始)="#fff",，
小屋(颜色)(结尾)="#fff",，
cottages_数组=[]；
对于（变量i=村庄面积长度-1；i>=0；i--）{
canvas.setStart（）；
var obj=村庄面积[i]；
canvas.image（obj.plan\u image，0，0，canvas\u setup.canvas\u width，canvas\u setup.canvas\u height）；
对于（var j=0；j

---

有人能帮帮我吗？我不知道如何让它正常工作。如果我只有一间小屋，它就完全符合我的需要，但如果有多间小屋，它就会毁掉一切：（

好的，我的同事帮了我的忙，所以我在这里为一个有人有同样问题的案例编写解决方案

我们甚至为mouseleave添加了eve，并提供了必要的操作：

eve.on('raphael.event.mouseleave', function(){
    this.animate({opacity: 0}, speed_anim_out);
    this.data('clicked', false);
});

我们检查对象是否具有所需的属性，并在数组的循环中触发raphael mouseleave事件

$('.cottage_info').mouseleave(function() {
    $(this).hide();
    for (var x = 0; x < cottages_array.length; x++) {
        if (cottages_array[x].data('clicked')) {
            eve( 'raphael.event.mouseleave', cottages_array[x] );
            break;
        };
    }
});

$（'.butch_info'）.mouseleave（函数（）{
$（this.hide（）；
对于（var x=0；x