jQuery - возможно ли иметь отдельные события onHover и onClick? - PullRequest
Новая
       17

jQuery - возможно ли иметь отдельные события onHover и onClick?

0 голосов
/ 22 февраля 2011

В настоящее время я создаю веб-сайт, который использует много jQuery, он предполагает наличие интерактивной карты.

Будут точки на карте, но мне нужно, когда вы наводите курсор мыши на точку карты,отображается небольшое описание (возможно, в div, называемом .mapitem-smalldescription), а затем, когда вы НАЖИМАЕТЕ на точку карты, будет отображаться гораздо большее полное описание с изображениями (в другом div, называемом, например, .mapitem-fulldescription)

Я знаю, как проводить события onclick и onhover на отдельных точках карты, но я не смог успешно объединить их вместе в одну точку на карте.

Как мне это сделать, пожалуйста?

Зак

Ответы [ 2 ]

4 голосов
/ 22 февраля 2011

Предполагая, что у каждой точки карты будет класс mappoint: 

$('.mappoint').hover(function() {
    //do something on mouseover...
}, function() {
    //do something on mouseout...
}).click(function() {
    //do something on click...
});
2 голосов
/ 22 февраля 2011

Если бы у каждой из ваших точек карты был класс точка , это могло бы работать:

Попробуйте это: 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/. Дайте мне знать, если вам нужно что-то изменить или добавить.

Надеюсь, это поможет!

...