RaphaelJS-悬停-显示/隐藏单独的DIV

Question

我是RaphaelJS的真正新手，请原谅我一些基本问题。

我正在尝试在我的网站上实现交互式地图，听说RaphaelJS是实现此目标的最佳选择。 但是，它当前对我不利。 我在github上找到了一张地图，现在我正在修补它，所以A，我对需要做的事情有更好的了解。 B，我可以在潜入之前写出工作代码。

我要完成的工作。 当用户将鼠标悬停在某个状态上时，将显示一个div（在这种情况下，该div在CSS中称为box）。 我知道如何在JQUERY中做到这一点。

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

但是，这在JS编写中不起作用。 那么可能是因为我要拉一个Raphael对象？

这是地图和代码的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/