0

の配置に問題がありdivます。は次のdivとおりです。

<div class="facebookHoverDiv" style="position: absolute; top: 0; left: 0; z-index: 15000; display: none">
<div class="calendar-hover-top"></div>
<div class="calendar-hover-middle">
    <div class="post-image"></div>
    <div class="facebook-icon">Facebook</div>
    <div class="post-content"><span id="facebook-text">content</span>
        <div class="post-date">This will be the date.</div>
    </div>
</div>
<div class="calendar-hover-bottom"></div>
</div>

<div class="twitterHoverDiv" style="position: absolute; top: 0; left: 0; z-index: 15000; display: none">
<div class="calendar-hover-top"></div>
<div class="calendar-hover-middle">
    <div class="twitter-icon">Twitter</div>
    <div class="post-content"><span id="twitter-text">content</span>
        <div class="post-date">This will be the date.</div>
    </div>
</div>
<div class="calendar-hover-bottom"></div>
</div>

次のjQuery関数を使用してツールチップを表示しています:

    function ShowToolTip(event, postType, postMessage, scheduleDate, customPostId, postId) {
        if (postType == 'Twitter') {
            $('.twitterHoverDiv .post-content #twitter-text').text(postMessage);
            $('.twitterHoverDiv .post-content .post-date').text(scheduleDate);
            $('.twitterHoverDiv').css("left", event.x - 65);
            $('.twitterHoverDiv').css("top", event.y - $('.twitterHoverDiv').height());


            $('.facebookHoverDiv').hide();
            $('.twitterHoverDiv').show();
        } else {
            $('.facebookHoverDiv .post-content #facebook-text').text(postMessage);
            var url = "http://host.mmm.dev.webedge.mcmurry.com/Media/Image.ashx?articleid=" + postId + "&custompostid=" + customPostId;
            //url = url.replace("undefined", "0");
            $('.facebookHoverDiv .post-image').css("background-image", "url('" + url + "')");
            $('.facebookHoverDiv .post-image').css("background-size", "100%");
            $('.facebookHoverDiv .post-content .post-date').text(scheduleDate);
            $('.facebookHoverDiv').css("left", event.x - 65);
            $('.facebookHoverDiv').css("top", event.y - $('.facebookHoverDiv').height());


            $('.twitterHoverDiv').hide();
            $('.facebookHoverDiv').show();
        }
    }

これをGoogle Chromeで実行すると、完全に機能します。ただし、FireFox で実行すると、画面の左上隅にツールチップが表示されます。問題は$('.facebookHoverDiv').css("left", event.x - 65);と の$('.facebookHoverDiv').css("top", event.y - $('.facebookHoverDiv').height());呼び出しにあるようです。

FireFoxに固有の何かが必要ですか?

4

2 に答える 2

2

私はそれを考え出した。他の誰かがこの問題に遭遇した場合に備えて。この問題は、event.xおよびevent.yプロパティを使用したことが原因でした。これらのプロパティは Chrome に存在しますが、他のブラウザでは と と呼ばれevent.clientXますevent.clientY。プロパティをこれに変更すると、問題が修正されました。

于 2012-11-09T22:40:15.457 に答える
0

単位を設定する

.css("left", (event.x - 65) + "px");

上と同じことをする

于 2012-11-09T21:17:35.207 に答える