RaphaelJS - Hover - показать/скрыть отдельно DIV

Question

Я настоящий новичок, когда речь заходит о RaphaelJS, так простите меня за некоторые основные вопросы.

Я пытаюсь реализовать интерактивную карту на своем веб-сайте и услышал, что RaphaelJS был лучшим вариантом для этого. Однако в настоящее время он не работает в мою пользу. Я нашел карту на github, и сейчас я занимаюсь ею, поэтому я лучше понимаю, что нужно сделать. B, я могу написать рабочий код, прежде чем погрузиться.

То, что я пытаюсь выполнить. Когда пользователь зависает над состоянием, отображается div (в данном случае поле с именем div в CSS). Я знаю, как это сделать в JQUERY.

$("CA").hover(function(){ $(".box").show();

Однако это не работает в JS рецензии. Скорее всего, потому что я потянул объект Рафаэля?

Вот jsfiddle к карте и коду.

http://jsfiddle.net/b3vLx8uh/1/

HTML

<div id="rsr"></div> 
<div class="box"></div> 

CSS

#rsr { 
    width: 615px; 
    height: 500px; 
} 

.box { 
    height: 200px; 
    width: 200px; 
    border: 1px solid red; 
    display: none; 
} 

(проверить JSfiddle для JS кода)

Я застрял, пытаясь понять это. Любая помощь приветствуется!

Спасибо.

Answer 1

Вам не нужно использовать Raphaël для этого, вы можете просто использовать vanilla JS (или jQuery, если вы загрузите эту библиотеку тоже).

el.mouseover(function() { 
    document.getElementById('myHoverContents').style.display = 'block'; //show the div 
    this.toFront(); 
    this.attr({ 
     cursor: 'pointer', 
     fill: 'black', 
     stroke: '#fff', 
      'stroke-width': '2', 

    }); 
    this.animate({ 
     scale: '1.2' 
    }, 200); 
}); 
el.mouseout(function() { 
    document.getElementById('myHoverContents').style.display = 'none'; //hide the div 
    this.animate({ 
     scale: '1.05' 
    }, 200); 
    this.attr({ 
     fill: '#003366' 
    }); 
}); 

http://jsfiddle.net/b3vLx8uh/3/