Question

对于RaphaelJS来说，我是一个真正的新手，请原谅我一些基本问题。

我试图在我的网站上实现互动地图，并听说RaphaelJS是实现这一目标的最佳选择。然而，它目前对我不利。我在github上找到了一张地图，现在我正在修补它，所以A，我对需要做什么有了更好的理解。 B，我可以在潜入之前写出工作代码。

我想要完成的事情。当用户将鼠标悬停在某个状态上时，会显示一个div（在本例中为div中的div）。我知道如何在JQUERY中完成这个任务。

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

然而，这不适用于JS写作。更可能是因为我拉了拉斐尔的对象？

这是地图和代码的jsfiddle。

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/

RaphaelJS - Hover - 显示/隐藏单独的DIV

1 个答案: