gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:28:46 24 4
gpt4 key购买 nike

我正在尝试使用 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 菜鸟,所以如果我只是以错误的方式做所有事情,非常感谢您的指点。

最佳答案

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

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

关于javascript - 将鼠标悬停在拉斐尔圆上时显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4179544/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com