Why does the layer flicker when the mouse moves in the onmouseover event in JavaScript?-JS Tutorial-php.cn

Why does the layer flicker when the mouse moves in the onmouseover event in JavaScript?

黄舟

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

Original

3088 people have browsed it

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

Copy after login

The effect achieved is that when the mouse is placed on the picture, a description of the picture will be displayed. However, when the mouse is placed on it, it will flash continuously. Please know the reason

The reason is very simple:
After span.des appears, it covers img. That is to say, your mouse is no longer on img at this time, but on span.des. So you trigger the mouseout event of img with a slight movement, and then span.des disappears naturally due to ClearDes. After disappearing, the mouse is equivalent to being on img again, so the mouseover event is immediately triggered, ShowDes is called, and span.des is displayed...

So it keeps flashing.

Since you only asked about the reason, I will not answer the general solution. A solution for newer browsers: Add pointer-events: none;

to the CSS of .des. Each of your pictures and text is included in a div, and listen to the events of this div. . I changed it slightly based on your code

In browsers that support div:hover{ /* ... */ }, this effect does not require JS. As follows:

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

Copy after login

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

Copy after login

For browsers that support mouseenter and mouseleave events, binding these two events can solve the problem! For those that are not supported, you can simulate enter and leave by making some judgments in the handlers of the mouseover and mouseout events!

Try using mouseenter and mouseleave, it should solve this problem. In the past, I used these two to solve the flickering problem under IE browser.

The above is the detailed content of Why does the layer flicker when the mouse moves in the onmouseover event in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!