У меня есть карта изображений, в которой я хочу показать новый 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.
Вам по-прежнему необходимо зафиксировать пространство ниже divs, но это должно работать
$("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
:
.office-default {
background:#444;
padding:5px 15px 0;
width: 80%;
height:150px;
}
просмотрите эту ссылку, это может помочь вам немного http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles