0

まず、私はIEが嫌いですが、私たち全員がそれをサポートする必要があります。

私は地図を持っています。この地図には、ユーザーがカーソルを合わせて画像が表示され、テキストが書き込まれる「ホットスポット」があります。

<script src="jquery.js"></script>


<div style="width: 673px; position: relative" id="map">
    <div style="width: 45px; height: 45px; position: absolute; top: 550px; left: 295px;" id="meeting1"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 470px; left: 605px;" id="meeting2"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 155px; left: 438px;" id="meeting3"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 195px; left: 275px;" id="meeting4"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 217px; left: 230px;" id="meeting5"></div>
    <div style="width: 45px; height: 45px; position: absolute; top: 505px; left: 235px;" id="meeting6"></div>
    <img src="map-tour.png" width="673px" />

    <div style="width: 270px; height: 45px; border-style: solid; border-color: black; position: absolute; top: 600px; left: 370px;" id="display"></div>
</div>

<script>
$('#display').html('<p>--</p>');

$(document).ready(function () {
    $("#meeting1").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test1</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting2").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test2</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting3").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test3</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting4").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test4</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting5").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test5</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });

    $("#meeting6").on({
        mouseenter: function() {
            $(this).html("<img src='map-tour-hover-icon.png' width='75' style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test6</p>");
        },
        mouseleave: function() {
            $(this).html("");
            $("#display").html("<p>--</p>");
        }
    });
});
</script>

これはChrome内では期待どおりに機能しますが（実際にはjQuery.hoverは問題なく機能しました）、IE内では機能しません。ただし、border-styleを追加すると：solid; ボーダーカラー：＃0000; ＃meeting1 divのスタイル内では、正常に機能します。

誰か助けてもらえますか！？

前もって感謝します。

4

2 に答える 2

0

マウスエンターとマウスリーブを使用している場合は、jQueryホバーを使用します。より適切で具体的です。そして、すべてにも互換性があります。

$("#meeting5").hover(
     function() {
     $(this).html("<img src='map-tour-hover-icon.png' width='75'
       style='position:absolute; top: -15px; left: -15px;' />");
            $("#display").html("<p>Test5</p>");
        },
        function() {
            $(this).html("");
            $("#display").html("<p>--</p>");

    });
于 2012-10-02T16:00:58.360 に答える
0

理解した。

最初に 45px x 45px の透明な画像を作成し、次に HTML を変更してこの画像を含めました。

<div style="width: 45px; height: 45px; position: absolute; top: 550px; left: 295px;" id="meeting1"><img src="t.png" /></div>

次に、javascriptを変更して読み取ります

$("#meeting1 img").on({
    mouseenter: function() {
        $(this).attr("src", "map-tour-hover-icon.png");
        $(this).attr("width", "75");
        $(this).attr("style", "position:absolute; top: -15px; left: -15px;");
        $("#display").html("<p>Text in there</p>");
    },
    mouseleave: function() {
        $(this).attr("src", "t.png");
        $('#display').html('<p>Replacement Text here</p>');
    }
});

したがって、div 内の HTML を更新するのではなく、画像とその属性を更新します。

于 2012-10-03T08:31:39.733 に答える