jquery - jquery悬停问题并单击切换

Question

我有一个充满区域的 map ，如果您将鼠标悬停在一个区域上或单击它，将出现一个框(div)。

当我将鼠标悬停在某个区域上时，框(div)出现但在将鼠标移开后不会消失，所以如果我做对了这意味着我需要有一个切换或类似的东西，但是对于徘徊。 我花了几个小时在这里和其他地方搜索，尝试了一些代码，但没有一个有效。

所以我想知道切换 .hover 和切换 .click 的代码是什么 我在这里做错了什么，还是我完全使用了错误的代码？

这是我正在测试的网页: http://iseeit.no/maptest/

这是我在 jquery 中的代码:(.no19、.no2、.no1 是区域)

$(".no19").hover(function() {
$("#vest-agder").css({"display":"block"});
});

$(".no2").hover(function() {
$("#aust-agder").css({"display":"block"});
});

$(".no1").hover(function() {
$("#akershus").css({"display":"block"});
});

我试过这样的东西和其他一些东西，这似乎是正确的代码，但我无法让它正常工作:

 $(".no19").hover(function() {
     $(this).toggleClass('active');
        $('#vest-agder').toggleClass('active');
});

这是 css 的一个片段:

#vest-agder {
    background: #111;
    background: rgba(0,0,0,.8);
    color: #eee;
    position:absolute;
    display: none;

这是 html 的一个片段:

<div id="vest-agder">
    <!-- agent address in the first region -->
  <p>text</p>
  </div>

我还把 html、jquery 和 css 的所有编码都放在了 jsfiddle 中: http://jsfiddle.net/cpKFf/1/ 我从未使用过 jsfiddle，所以我不知道如何正确设置它，但我想它需要所有图形组件才能正确显示 map 。 您看到的代码是这样的结果: http://iseeit.no/maptest/

希望我说清楚了:)

Answer 1

我不是 jquery 专家，但不应该是 $(this).toggleClass('display');

http://api.jquery.com/toggleClass/