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

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

黄舟

Libérer： 2017-07-19 14:20:34

original

3174 Les gens l'ont consulté

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

Copier après la connexion

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 : < Après l'apparition de 🎜>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>

Copier après la connexion

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

Copier après la connexion

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!