JQuery показать div при наведении курсора с изображением карты

0

У меня есть карта изображений, в которой я хочу показать новый div, когда я нахожусь над горячими точками. Он начинается с перечисления текста по умолчанию, но как только я наводил указатель на горячие точки, я хочу, чтобы это изменилось до соответствующих div. Я использую следующий код и не получаю радости:

$(".office-default").mouseover(function () {
    var elementId = "#office-" + $(this).attr("id").split("-")[1];
    $(elementId).removeClass("hidden");
});

$(".office-default").mouseout(function () {
    var elementId = "#office-" + $(this).attr("id").split("-")[1];
    $(elementId).addClass("hidden");
});

Здесь весь код: http://jsfiddle.net/leadbellydesign/jR6pa/1/

Я выполнил множество поисков и не придумал ничего полезного. Я не хочу менять изображения, я просто хочу показать div.

  • 0
    Для div ".office-default" отсутствует атрибут ID.
  • 0
    Хорошо, когда я добавляю идентификатор "office-default", когда вычеркиваю из этого мышью, исходное изображение и текст исчезают. Так что, по крайней мере, я получаю какое-то действие. Спасибо!
Показать ещё 1 комментарий
Теги:
imagemap

2 ответа

2
Лучший ответ

Вам по-прежнему необходимо зафиксировать пространство ниже divs, но это должно работать

DEMO

$("area").hover(function () {
    $office = $(this).attr("href");
    $(".office-default > div").addClass("hidden");
    $($office).removeClass("hidden");
}, function(){
    $(".office-default > div").addClass("hidden");
    $("#office-1").removeClass("hidden");
});

ОБНОВИТЬ

Чтобы устранить проблему с интервалом, обновите свой .office-default:

DEMO

.office-default {
    background:#444;
    padding:5px 15px 0;
    width: 80%;
    height:150px;
}
  • 0
    Ты жжешь! Спасибо.
  • 0
    Последний вопрос. Насколько сложно было бы оставлять информацию доступной для копирования и вставки, пока вы не наведете курсор на другую область на карте? Мне трудно найти и устранить дополнительное пространство, если оно исчезает каждый раз, когда я выкидываю мышь.
Показать ещё 2 комментария
1

просмотрите эту ссылку, это может помочь вам немного http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles

Ещё вопросы

Сообщество Overcoder
Наверх
Меню