gra*_*tur 4 javascript jquery raphael
我正在尝试使用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,所以如果我只是以错误的方式做所有事情,那么我们非常感谢指针.
你真的离这里很近,但它只是在你越过圆圈的边界时检测到鼠标悬停和鼠标移动,因为它们没有被填充.尝试填充它们.
$(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>");
});
});
});