отображение текста при наведении на круг Рафаэля - PullRequest
Новая
       1

отображение текста при наведении на круг Рафаэля

4 голосов
/ 14 ноября 2010

Я пытаюсь использовать 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, поэтому, если я просто делаю все неправильно,указатели высоко ценятся.

1 Ответ

6 голосов
/ 15 ноября 2010

Вы действительно близко, но вы обнаруживаете только наведение курсора и мышку, когда вы пересекаете границы кругов, потому что они не заполнены. Попробуйте заполнить их. 

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