showing text when hovering over a Raphael circle
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>
<开发者_C百科;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.
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>");
});
});
});
加载中,请稍侯......
精彩评论