0

我目前正在构建一个使用大量 jQuery 的网站，它涉及到一个交互式地图。

地图上会有点，但我需要的是，当你将鼠标悬停在地图点上时，会显示一个小描述（可能在一个名为 .mapitem-smalldescription 的 div 中），然后当你点击地图点时，会显示很多将显示带有图片的更大的完整描述（在另一个名为的 div 中，例如 .mapitem-fulldescription）

我知道如何在单独的地图点上执行 onclick 和 onhover 事件，但我无法成功地将它们组合到一个地图点上。

请问我该怎么做？

扎克

4

2 回答 2

4

假设每个地图点都有类mappoint：

$('.mappoint').hover(function() {
    //do something on mouseover...
}, function() {
    //do something on mouseout...
}).click(function() {
    //do something on click...
});
于 2011-02-22T17:30:52.770 回答
2

如果您的每个地图点都有类点，这可能会起作用：

试试这个：http: //jsfiddle.net/nrwyz/8/。

代码：

HTML

<div class="point">
</div>

Javascript

$(".point").live("mouseover", function() {
    //code to show description
    $(this).append('<div class="mapitem-smalldescription">Small description</div>');
});

$(".point").live("mouseout", function() {
    //code to show description
    $(".mapitem-smalldescription").fadeOut(200);
});

$(".point").live("click", function() {
    //code to full description
    $(this).append('<div class="mapitem-fulldescription">Full description</div>');

});

CSS

.point {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background-color: #550000;
}

.mapitem-smalldescription {
    width: 100px;
    height: 100px;
    background-color: #00FF00;
}

.mapitem-fulldescription {
    width: 100px;
    height: 100px;
    background-color: #FF0000;
}

编辑：这是一个与您描述的方式更接近的版本：http: //jsfiddle.net/nrwyz/23/。让我知道您是否需要修改或添加任何其他内容。

我希望这会有所帮助！

于 2011-02-22T17:34:04.763 回答