Question

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

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

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

我该怎么办呢？

扎克

Answer 1

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

$('.mappoint').hover(function() {
    //do something on mouseover...
}, function() {
    //do something on mouseout...
}).click(function() {
    //do something on click...
});

Answer 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/。如果您还需要修改或添加其他内容，请与我们联系。

我希望有所帮助！

jQuery - 是否可以单独使用onHover和onClick事件？

2 个答案: