悬停在拉斐尔圆圈上时显示文字
[英]showing text when hovering over a Raphael circle
问题描述
I'm trying to use jQuery and RaphaelJS to: 
我正在尝试使用jQuery和RaphaelJS：
- Create circles 创建圈子
- Display some information when hovering over the circle (and hiding the information when not hovering over it) 将鼠标悬停在圆圈上时显示一些信息（并在未悬停在其上时隐藏信息）
However, I can't quite get the information to display correctly... It seems to display and then immediately hide. 但是，我无法正确显示信息......它似乎显示然后立即隐藏。 Here's a simplified test version of the code I'm using: 这是我正在使用的代码的简化测试版本：
<!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>
In this example, as soon as I cross into a circle, both "MouseOver" and "MouseOut" immediately get displayed. 在这个例子中，一旦我进入一个圆圈，立即显示“MouseOver”和“MouseOut”。 I'm not sure if I'm using the wrong events, or if there's something funky going on with Raphael. 我不确定我是否使用了错误的事件，或者拉斐尔是否有一些时髦的事情。
I'm a total Javascript noob, so if I'm simply doing everything the wrong way, pointers are much appreciated. 我是一个完整的Javascript noob，所以如果我只是以错误的方式做所有事情，那么我们非常感谢指针。
1 个解决方案
解决方案1
6 已采纳 2010-11-14 21:03:38
You're really close here but it's only detecting the mouseover and mouseout right as you cross the borders of the circles because they're not filled in. Try filling them. 你真的离这里很近，但它只是在你越过圆圈的边界时检测到鼠标悬停和鼠标移动，因为它们没有被填充。尝试填充它们。
$(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>");
});
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.