<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>
實現的效果是滑鼠放到圖片上,會顯示圖片的一個說明文字,但是發現滑鼠放上去,會不停的閃爍,求知道原因
原因很簡單:
span.des 出現後,它遮住了 img。也就是說此時你的滑鼠已經不在 img 上了,而是在 span.des 上。於是你稍微一動就觸發了 img 的 mouseout 事件,然後由於 ClearDes, span.des 也自然地消失了。消失以後滑鼠相當於又在 img 上了,於是又立刻觸發 mouseover 事件,呼叫 ShowDes,把 span.des 顯示出來…
因此它就一直在閃。
既然你只問原因,我就不回答通用的解決方法了。一個在較新的瀏覽器的解決方法:在 .des 的CSS 裡加上 pointer-events: none;
你的每張圖片和文字都包括在一個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事件的handler中做一下判斷,就可以模擬enter和leave了!
用 mouseenter和 mouseleave試一下,應該可以解決此問題.以前是用這兩個解決在ie瀏覽器下閃爍的問題的.
以上是為什麼JavaScript中的onmouseover事件滑鼠移動時圖層會閃爍?的詳細內容。更多資訊請關注PHP中文網其他相關文章!