Warum flackert die Ebene, wenn sich die Maus im Onmouseover-Ereignis in JavaScript bewegt?-js-Tutorial-php.cn

Warum flackert die Ebene, wenn sich die Maus im Onmouseover-Ereignis in JavaScript bewegt?

黄舟

Freigeben： 2017-07-19 14:20:34

Original

3174 Leute haben es durchsucht

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图片说明demo</title>
    <!--样式-->
    <style type="text/css">
        /*主div*/
        #main
        {            width: 960px;        
            height: 600px;      
            border: 1px solid #000;     
            margin: auto;
        }        .content
        {            margin:auto;            margin-top: 50px;            width: 99%;
        }        .photo
        {            float: left;            margin-left: 20px;            cursor: pointer;
        }        /*图片*/
        .pic
        {            height: 287px;            width: 287px;         
            border: 1px solid #fc2;
        }        /*文字描述*/
        .des
        {            display: none;            width: 289px;            height: 289px;            margin-top: -289px;            border: 1px solid #ce3; 
            background-color: #000;            color: #fff;            z-index:10px;            position: relative;
        }        .detail
        {            display: none;            width: 300px;            height: 200px;            background-color: #eec;
        }    </style>
    <!--JS代码-->
    <script type="text/javascript">
        function ShowDes( id ){            document.getElementById(&#39;des&#39;+ id ).style.display = "block";
        }        function ClearDes( id ){            document.getElementById(&#39;des&#39;+ id ).style.display = "none";
        }        function ShowDetail( id ){            document.getElementById( &#39;detail&#39;+id ).style.display = "block";            document.getElementById(&#39;list_content&#39;).style.display = "none";
        }    </script></head><body>
    <div id="main">
        <div id="list_content" class="content">
            <div class="photo">
                <img class="pic" id="img1" onmouseover="ShowDes(1)" onmouseout="ClearDes(1)" src="http://img0.bdstatic.com/img/image/sy1204.jpg" />
                <span  id="des1" onclick="ShowDetail(3)" class="des">
                    图片一                </span>
            </div>
            <div  class="photo">
                        <img id="img2" class="pic" onmouseover="ShowDes(2)" onmouseout="ClearDes(2)" src="http://img0.bdstatic.com/img/image/8034a36acaf2edda3cc7a7cfd3703e93901213f9208.jpg" />

                <span  id="des2" class="des">
                    图片二                </span>
            </div>
            <div  class="photo">
                <img class="pic"  id="img3" onmouseover="ShowDes(3)" onmouseout="ClearDes(3)" src="http://img0.bdstatic.com/img/image/379b8389b504fc2d5625c364ec2e51190ef76c66ce7.jpg" />

                <span id="des3" class="des" >
                    图片三                </span>
            </div>
        </div>
        <div id = "detail1" class = "detail" >
            APP详情1        </div>
        <div id = "detail2" class = "detail" >
            APP详情2        </div>
        <div id = "detail3" class = "detail" >
            APP详情3        </div>
    </div></body></html>

Nach dem Login kopieren

Der erzielte Effekt besteht darin, dass eine Beschreibung des Bildes angezeigt wird, wenn die Maus darauf platziert wird. Bitte kennen Sie den Grund dafür >

Der Grund ist ganz einfach: < Nachdem 🎜>span.des erscheint, verdeckt es das Bild. Das heißt, Ihre Maus befindet sich zu diesem Zeitpunkt nicht mehr auf img, sondern auf span.des. Sie lösen also mit einer leichten Bewegung das Mouseout-Ereignis von img aus, und dann verschwindet span.des aufgrund von ClearDes auf natürliche Weise. Nach dem Verschwinden ist die Maus gleichbedeutend damit, wieder auf img zu sein, sodass das Mouseover-Ereignis sofort ausgelöst wird, ShowDes aufgerufen und span.des angezeigt wird ...

Es blinkt also weiter.

Da Sie nur nach dem Grund gefragt haben, werde ich nicht auf die allgemeine Lösung antworten. Eine Lösung für neuere Browser: Fügen Sie pointer-events: none;

im CSS von .des hinzu und hören Sie sich die Ereignisse dieses Div an. Ich habe es basierend auf Ihrem Code leicht modifiziert

In Browsern, die div:hover{ /* ... */ } unterstützen, ist für diesen Effekt kein JS erforderlich. Wie folgt:

<div class="photo">    <img src="..."/>
    <span>内容</span></div>

Nach dem Login kopieren

Für Browser, die MouseEnter- und MouseLeave-Ereignisse unterstützen, kann das Binden dieser beiden Ereignisse das Problem lösen! Für diejenigen, die nicht unterstützt werden, können Sie das Betreten und Verlassen simulieren, indem Sie einige Beurteilungen in den Handlern der Mouseover- und Mouseout-Ereignisse vornehmen!

.photo span{    display: none;    /* ...其余样式... */}.photo:hover span{    display: block;
}

Nach dem Login kopieren

Versuchen Sie es mit MouseEnter und MouseLeave, das sollte dieses Problem lösen. In der Vergangenheit habe ich diese beiden verwendet, um das Flackerproblem im IE-Browser zu lösen.

Das obige ist der detaillierte Inhalt vonWarum flackert die Ebene, wenn sich die Maus im Onmouseover-Ereignis in JavaScript bewegt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!