将鼠标悬停在拉斐尔圆上时显示文本

发布于 2024-10-02 08:47:23 字数 1088 浏览 4 评论 0原文

我正在尝试使用 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 菜鸟，所以如果我只是以错误的方式做所有事情，那么指针将非常感激。

原文

I'm trying to use jQuery and RaphaelJS to:

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. 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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

栀梦 2024-10-09 08:47:23

你已经很接近了，但它只是在你越过圆圈边界时检测鼠标悬停和鼠标移出，因为它们没有被填充。尝试填充它们。

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

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

回复收藏 0 原文

~没有更多了~