懸停在拉斐爾圓圈上時顯示文字

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 個解決方案

解決方案1
6 已采納 2010-11-14 21:03:38

懸停在拉斐爾圓圈上時顯示文字

問題描述

1 個解決方案

解決方案1 6 已采納 2010-11-14 21:03:38

解決方案1
6 已采納 2010-11-14 21:03:38