Maison >interface Web >js tutoriel >Pourquoi le calque scintille-t-il lorsque la souris se déplace lors de l'événement onmouseover en JavaScript ?

Pourquoi le calque scintille-t-il lorsque la souris se déplace lors de l'événement onmouseover en JavaScript ?

黄舟original: 2017-07-19 14:20:343176parcourir

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

L'effet obtenu est que lorsque la souris est placée sur l'image, une description de l'image sera affichée. Cependant, lorsque la souris est placée dessus, elle clignotera en continu

La raison est très simple : span.des, il recouvre l'img. C'est-à-dire que votre souris n'est plus sur img à ce moment-là, mais sur span.des. Vous déclenchez donc l'événement mouseout de img avec un léger mouvement, puis span.des disparaît naturellement à cause de ClearDes. Après avoir disparu, la souris équivaut à être à nouveau sur img, donc l'événement mouseover est immédiatement déclenché, ShowDes est appelé et span.des est affiché...

Il continue donc de clignoter.

Puisque vous avez seulement demandé la raison, je ne répondrai pas à la solution générale. Une solution pour les navigateurs plus récents : ajoutez pointer-events: none;

dans le CSS de .des Chacune de vos images et textes est inclus dans un div, et écoutez les événements de ce div. Je l'ai légèrement modifié en fonction de votre code

Dans les navigateurs prenant en charge div:hover{ /* ... */ }, cet effet ne nécessite pas JS. Comme suit :

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

Pour les navigateurs qui prennent en charge les événements mouseenter et mouseleave, lier ces deux événements peut résoudre le problème ! Pour ceux qui ne sont pas pris en charge, vous pouvez simuler l'entrée et la sortie en faisant quelques jugements dans les gestionnaires des événements mouseover et mouseout !

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

Essayez d'utiliser mouseenter et mouseleave, cela devrait résoudre ce problème. Dans le passé, j'utilisais ces deux éléments pour résoudre le problème de scintillement sous le navigateur IE.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Questions sur les événements de souris de Table (onMouseOver, onMouseOut)Article suivant：Questions sur les événements de souris de Table (onMouseOver, onMouseOut)

Articles Liés

Voir plus