JavaScript の onmouseover イベントでマウスを移動するとレイヤーがちらつくのはなぜですか?-jsチュートリアル-php.cn

JavaScript の onmouseover イベントでマウスを移動するとレイヤーがちらつくのはなぜですか?

黄舟

リリース： 2017-07-19 14:20:34

オリジナル

3173 人が閲覧しました

<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>

ログイン後にコピー

画像の上にマウスを置くと画像の説明が表示されるという効果ですが、マウスを置くと点滅し続けるのです

その理由は非常に大きいです。シンプル:
span.des が表示された後、ライブ画像をカバーします。つまり、この時点ではマウスは img 上ではなく、span.des 上にあります。そこで、ちょっとした動きでimgのmouseoutイベントをトリガーすると、ClearDesによってspan.desが自然に消えてしまいます。消えた後、マウスは再び img 上にあるのと同じなので、mouseover イベントがすぐにトリガーされ、ShowDes が呼び出され、span.des が表示されます...

つまり、点滅し続けます。

理由だけを聞いているので、一般的な解決策についてはお答えしません。新しいブラウザ向けの解決策: pointer-events: none;

それぞれの画像とテキストは .des の CSS の div に含まれており、この div のイベントをリッスンします。コードに基づいて少し変更しました

div:hover{ /* ... */ } をサポートするブラウザでは、この効果には JS は必要ありません。以下のように:

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

ログイン後にコピー

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

ログイン後にコピー

Mouseenter イベントと MouseLeave イベントをサポートするブラウザの場合、これら 2 つのイベントをバインドすると問題を解決できます。サポートされていないものについては、mouseover イベントと Mouseout イベントのハンドラーで何らかの判断を行うことで、入室と退出をシミュレートできます。

mouseenter と Mouseleave を使用してみてください。この問題は解決されるはずです。以前、これら 2 つを使用して IE ブラウザーのちらつきの問題を解決しました。

以上がJavaScript の onmouseover イベントでマウスを移動するとレイヤーがちらつくのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。