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 中没有。但是，如果我添加边框样式：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 回答