為什麼JavaScript中的onmouseover事件滑鼠移動時圖層會閃爍？-js教程-PHP中文網

為什麼JavaScript中的onmouseover事件滑鼠移動時圖層會閃爍？

黄舟

發布： 2017-07-19 14:20:34

原創

3174 人瀏覽過

<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。也就是說此時你的滑鼠已經不在 img 上了，而是在 span.des 上。於是你稍微一動就觸發了 img 的 mouseout 事件，然後由於 ClearDes， span.des 也自然地消失了。消失以後滑鼠相當於又在 img 上了，於是又立刻觸發 mouseover 事件，呼叫 ShowDes，把 span.des 顯示出來…

因此它就一直在閃。

既然你只問原因，我就不回答通用的解決方法了。一個在較新的瀏覽器的解決方法：在 .des 的CSS 裡加上 pointer-events: none;

你的每張圖片和文字都包括在一個div 裡面了，監聽這個div 的事件。根據你的程式碼稍微改了一下

在支援 div:hover{ /* ... */ } 的瀏覽器裡面，這個效果不需要 JS。如下：

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

登入後複製

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

登入後複製

對於支援mouseenter和mouseleave事件的瀏覽器，綁定這兩個事件，是可以解決問題的！對於不支援的，在mouseover和mouseout事件的handler中做一下判斷，就可以模擬enter和leave了！

用 mouseenter和 mouseleave試一下，應該可以解決此問題．以前是用這兩個解決在ie瀏覽器下閃爍的問題的．

以上是為什麼JavaScript中的onmouseover事件滑鼠移動時圖層會閃爍？的詳細內容。更多資訊請關注PHP中文網其他相關文章！