Question

我正在尝试使用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”。我不确定我是否使用了错误的事件，或者拉斐尔是否有一些时髦的事情。

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

Answer 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>");
    });
});
});

悬停在拉斐尔圆圈上时显示文字

1 个答案: