首頁  >  文章  >  web前端  >  為什麼JavaScript中的onmouseover事件滑鼠移動時圖層會閃爍?

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

黄舟
黄舟原創
2017-07-19 14:20:343120瀏覽

<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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn