悬停在拉斐尔圆上时显示文本答案

【问题标题】：showing text when hovering over a Raphael circle悬停在拉斐尔圆上时显示文本
【发布时间】：2010-11-14 20:30:24
【问题描述】：

我正在尝试使用 jQuery 和 RaphaelJS 来：

创建圈子
悬停在圆圈上时显示一些信息（不悬停时隐藏信息）

但是，我无法让信息正确显示...它似乎显示然后立即隐藏。这是我正在使用的代码的简化测试版本：

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">

$(function() {  
var paper = new Raphael("canvas_container", 300, 150);
paper.circle(50, 75, 30);
paper.circle(150, 75, 30);

$("circle").each(function(i) {
    $(this).mouseover(function() { 
        $("#test").append("<p>MouseOver</p>");
    });
    $(this).mouseout(function() { 
        $("#test").append("<p>MouseOut</p>");
    });
});
});
</script>
</head>

<body>
<div id="canvas_container"></div>  
<div id="test"></div>
</body>

</html>

在这个例子中，只要我穿过一个圆圈，“MouseOver”和“MouseOut”都会立即显示出来。我不确定我是否使用了错误的事件，或者 Raphael 是否发生了一些奇怪的事情。

我是一个完全的 Javascript 菜鸟，所以如果我只是以错误的方式做所有事情，我们非常感谢指针。

【问题讨论】：

标签： javascript jquery raphael

【解决方案1】：

您在这里真的很近，但它只会在您越过圆圈的边界时检测到鼠标悬停和鼠标移出，因为它们没有被填充。尝试填充它们。

$(function() {  
var paper = new Raphael("canvas_container", 300, 150);
paper.circle(50, 75, 30);
paper.circle(150, 75, 30);

$("circle").each(function(i) {
    $(this).attr({fill: '#FFF', stroke: '#000'});
    $(this).mouseover(function() { 
        $("#test").append("<p>MouseOver</p>");
    });
    $(this).mouseout(function() { 
        $("#test").append("<p>MouseOut</p>");
    });
});
});

【讨论】：