Javascript 为什么我能'；在Safari中不要从底部和左侧使用鼠标滑过？

我正在制作一个横幅，它会在鼠标上展开。Bu在Chrome Firefox和IE11中工作得非常完美，但在Safari上，如果我将鼠标从左到右或从下到上放置，我就无法展开

HTML

---

您可以尝试一下这个纯CSS解决方案：

#容器{
宽度：200px；
高度：200px；
利润率：20px；
背景色：红色；
-webkit过渡：所有0.3轻松输入输出；
-moz转换：所有0.3秒都易于输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
过渡：所有0.3秒的缓进缓出；
}
#容器：悬停{
-webkit转换：规模（1.14）；
-moz变换：比例（1.14）；
-o变换：标度（1.14）；
-ms变换：标度（1.14）；
转换：比例（1.14）；
}

---

不是CSS问题。与JS有关。当我试图展开时，它会像试图展开时一样发出短暂的闪光，但仍然保持静止。在inspect元素中，我可以看到，在不到一秒钟的时间内，它会将最高点从90px更改为410px，然后再返回到90px。我不想修复代码。我建议用一种不同的方法来实现你的目标。

<div id="container">
    <div id="ad" class="collapsed">
        <div id="banner">
            <img class="back" id="back" src="frames/frame_1.jpg"/>
            <img class="top" id="top" src="frames/frame_2.jpg"/>
            <img id="logo1" type="image/svg+xml" src="" />                                              
            <div class="border" id="border"></div>
            <img id="cta" src="frames/title.png"/>
        </div>
        <div id="expansion">
            <div class="exp_hm" id="exp_hm" >
                <div class="con-pos" id="con-pos" >                                         
                    <div id="videoContainer" class="videoContainer">           
                        <video class="video" id="video" poster="images/video_poster.jpg" autoplay></video>
                    </div>                                                                        
                </div>                    
            </div>
            <div class="endframe"></div>
            <img id="logo2" type="image/svg+xml" src="" />
            <div id="box"></div>
             <div class="topgrp">
                <div id="close-button" class="icon-cross"></div>
            </div>
            <div class="bottomgrp">
                <div id="replay" class="icon-replay"></div>
            </div>
        </div>
    </div>
</div>

function isClicked(e) {
    console.log('isclicked also called...');
    if (!expanded) {
        expand();
        console.log("is collapsed " + collapsed);
    }
}

function expand() {
    collapsed = false;
    expanded = true;
    adDiv.classList.remove("collapsed");
    adDiv.classList.add("expanded");
    $('#close-button').show();
    // expansionDiv.style.visibility = "visible";
    //ok whats new for a pushdown ?
    EB.expand();
    expansionDiv.style.height = expH + "px";
    expansionDiv.style.width = expW + "px";
    //check the replay is not showing
    $('#replay').hide();
    var temp = video.src.slice(-5)
    var res = temp.substr(0, 1);
    document.getElementById("box").style.height = "100%";
    stage.style.height = expH + "px";
    expansionDiv.style.height = expH + "px";
    adDiv.style.height = expH + "px";
    $('#videoControls').show();
    if (isIE9) {
        forceVideoToDisplayInIE9();
    }
    $("#exp_hm").stop(true, true).delay(0).fadeTo(1000, 1);
    $("#con-pos").animate({
        'opacity': '1',
        'width': expW + "px",
        'height': expH + "px",
        'left': "0px"
    }, 1000, 'linear', playVideo);
}

function collapse(e) {
    //clean up the end frame code on repeating functionality...so if we get to the end of the video collapse then replay..
    $('.endframe').hide();
    $('#replay').hide();
    $('#close-button').hide();
    expansionDiv.style.height = initialH + "px";
    expansionDiv.style.width = initialW + "px";
    video.removeEventListener("ended", videoEnd);
    document.getElementById("logo2").style.filter = "alpha(opacity=0)";
    document.getElementById("logo2").style.opacity = 0
    if (video) {
        video.pause();
    }
    $("#con-pos").animate({
        'opacity': '0',
        'width': initialW + "px",
        'height': initialH + "px",
        'left': "0px"
    }, 0);
    $("#exp_hm").stop(true, true).delay(0).fadeTo(0, 0, function () {
        document.getElementById("con-pos").style.width = initialW;
        document.getElementById("con-pos").style.left = expW - initialW;
        video.currentTime = 0;
        adDiv.classList.add("collapsed");
        adDiv.classList.remove("expanded");
        video.pause();
        document.getElementById("ad").style.width = initialW + "px";
        document.getElementById("ad").style.height = initialH + "px";
        document.getElementById("container").style.width = initialW + "px";
        document.getElementById("container").style.height = initialH + "px";
        EB.collapse();
        collapsed = true;
        expanded = false;
        // console.log("is expanded " + expanded);
    });
}

function addEventListeners() {
    if (collapsed = true) {
        $("#container").hover(function () {
            collapsed = false;
            isClicked();
        });
    }
}