JavaScript의 onmouseover 이벤트에서 마우스가 움직일 때 레이어가 깜박이는 이유는 무엇입니까?-JS 튜토리얼-php.cn

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가 나타난 후 Live img를 다룹니다. 즉, 현재 마우스는 더 이상 img에 있지 않고span.des에 있습니다. 따라서 약간의 움직임으로 img의 mouseout 이벤트를 트리거한 다음 ClearDes로 인해span.des가 자연스럽게 사라집니다. 사라진 후 마우스가 다시 img에 있는 것과 같으므로 mouseover 이벤트가 즉시 발생하고 ShowDes가 호출되어span.des가 표시됩니다...

그래서 계속 깜박입니다.

이유만 물어보셨기 때문에 일반적인 해결방법은 답변해드리지 않겠습니다. 최신 브라우저를 위한 솔루션: 포인터 이벤트 추가: 없음;

각 이미지와 텍스트는 .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 이벤트를 지원하는 브라우저의 경우 이 두 이벤트를 바인딩하면 문제를 해결할 수 있습니다! 지원되지 않는 경우에는 mouseover 및 mouseout 이벤트 핸들러에서 몇 가지 판단을 내려 입력 및 종료를 시뮬레이션할 수 있습니다!

mouseenter와 mouseleave를 사용해 보면 이 문제가 해결될 것입니다. 예전에는 IE 브라우저에서 깜박거리는 문제를 해결하기 위해 이 두 가지를 사용했습니다.

위 내용은 JavaScript의 onmouseover 이벤트에서 마우스가 움직일 때 레이어가 깜박이는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!