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 を表示したいだけです。

4

1 に答える 1

2

divの下のスペースを修正する必要がありますが、これでうまくいくはずです

デモ

$("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-defaultCSSを更新します。

デモ

.office-default {
    background:#444;
    padding:5px 15px 0;
    width: 80%;
    height:150px;
}
于 2013-11-14T15:15:02.777 に答える