onmouseover事件，為啥鼠標(biāo)移動(dòng)時(shí)層會(huì)閃爍

<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('des'+ id ).style.display = "block";
        }
        function ClearDes( id ){
            document.getElementById('des'+ id ).style.display = "none";
        }
        function ShowDetail( id ){
            document.getElementById( 'detail'+id ).style.display = "block";
            document.getElementById('list_content').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>

實(shí)現(xiàn)的效果是鼠標(biāo)放到圖片上，會(huì)顯示圖片的一個(gè)說明文字，但是發(fā)現(xiàn)鼠標(biāo)放上去，會(huì)不停的閃爍，求知道原因

回答

編輯回答

魚梓

你的每張圖片和文字都包括在一個(gè) div 里面了，監(jiān)聽這個(gè) div 的事件。根據(jù)你的代碼稍微改了一下

在支持 div:hover{ /* ... */ } 的瀏覽器里面，這個(gè)效果不需要 JS。如下即可：

<div class="photo">
    <img src="..."/>
    <span>內(nèi)容</span>
</div>

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

2018年3月27日 14:21

編輯回答

糖豆豆

原因很簡(jiǎn)單：
span.des 出現(xiàn)后，它遮住了 img。也就是說此時(shí)你的鼠標(biāo)已經(jīng)不在 img 上了，而是在 span.des 上。于是你稍微一動(dòng)就觸發(fā)了 img 的 mouseout 事件，然后由于 ClearDes， span.des 也就自然而然地消失了。消失以后鼠標(biāo)相當(dāng)于又在 img 上了，于是又立刻觸發(fā) mouseover 事件，調(diào)用 ShowDes，把 span.des 顯示出來……

因此它就一直在閃。

既然你只問原因，我就不回答通用的解決方法了。一個(gè)在較新的瀏覽器的解決辦法：在 .des 的 CSS 里加上 pointer-events: none;

2017年4月22日 06:20

編輯回答

還吻

對(duì)于支持mouseenter和mouseleave事件的瀏覽器，綁定這兩個(gè)事件，是可以解決問題的！
對(duì)于不支持的，在mouseover和mouseout事件的handler中做一下判斷，就可以模擬enter和leave了！

2017年11月7日 05:41

編輯回答

鐧簞噯

用 mouseenter和 mouseleave試一下，應(yīng)該可以解決此問題．以前是用這兩個(gè)解決在ie瀏覽器下閃爍的問題的．

2017年6月11日 23:57

編輯回答

空白格

看了一下大家的解決方案2點(diǎn)感悟：
1.pointer-events:none 第一次用，確實(shí)可以解決閃爍的問題，但是所有的事件都禁止了。如果這塊只是信息預(yù)覽那么是ok的，但是如果有click的點(diǎn)擊事件就不行了；比如我這里需要做的是圖片的預(yù)覽和刪除。貼個(gè)圖直觀點(diǎn)：

鼠標(biāo)hoverimg時(shí)出現(xiàn)預(yù)覽和刪除的按鈕，并且要有對(duì)應(yīng)的click操作處理預(yù)覽和刪除；所以方案一不可行；

2.既然時(shí)mouseover到img上觸發(fā)了span的出現(xiàn)，這時(shí)候鼠標(biāo)再span上又觸發(fā)了img的mouseout，所以一致再閃爍。我感覺最笨的辦法就是：給img和span都綁定相同的mouseout和mouseover事件，這樣就ok了。親測(cè)不閃爍，而且click事件也不影響；貼個(gè)代碼參考一下：

2017年9月16日 06:01

編輯回答

拼未來

自己試了一下，最高票的回答，給 .des 添加 pointer-events: none; 雖然可以實(shí)現(xiàn)不閃爍問題，但是帶來的問題是，添加在 img 上的事件 onclick="ShowDetail(3)" 也不會(huì)執(zhí)行了

所以另一種辦法是，把添加在img上的 onmouseout="ClearDes(1)" 放到 span 中，ClearDes 方法中添加
document.getElementById('img'+ id ).style.display = "block";
這樣既不會(huì)出現(xiàn)閃爍問題，添加在 img 上的事件也能保留

關(guān)于其它回答，使用mouseenter 代替 mouseover 是因?yàn)椋寒?dāng)元素綁定mouseover函數(shù)時(shí)，滑過元素中的子元素或者本身時(shí)都會(huì)觸發(fā)滑動(dòng)函數(shù)，但是mouseenter 必須是滑過元素本身，才會(huì)觸發(fā)，問題中 img 和 span 不存在父子關(guān)系，出現(xiàn)閃爍的原因不是子元素導(dǎo)致的，不是傳統(tǒng)的導(dǎo)致閃爍的原因

不過可以學(xué)習(xí)到 pointer-events: none 用法， MDN解釋是，元素永遠(yuǎn)不會(huì)成為鼠標(biāo)事件的target

2017年9月18日 05:04