JQuery仿购物网站放大镜特效所遇问题及思考
先贴下效果图，然后描述起来也就不会不知道我在说什么了。
我碰到的问题一: 一开始我自己总结了是因为两个小原因导致的①使用了mouseover,mouseout事件②因为层叠样式（z-index）的原因。一开始的HTML结构如图：
1 <ul> 2 <li class="first"> 3 <img src="./image/ep.jpg" alt=""> 4 <div class="tipbox"></div> 5 </li> 6 <div class="firBox"> 7 <img src="./image/ep.jpg" alt=""> 8 </div> 9 </ul>
我的思路是：一开始.firBox, .tipbox是隐藏的，当鼠标mouseover到li元素时，出现放大镜(.tipbox)和相应的放大区域(.firBox);而鼠标mouseout出li元素时，则隐藏二者。问题就出在这里了，我鼠标移动到li元素中，放大镜出现后就会莫名奇妙的消失了。然后我分析了是因为层叠样式导致的（并没有深刻理解mouseover,mouseout会冒泡，移入移出子元素也会触发mouseover,mouseout事件）。为搞清楚触发的顺序和层叠样式产生的影响，我参考了W3C的mouseover,mouseenter的区别例子，并在原来代码的基础上进行了测试。得出了结论：① 不论子元素的层叠样式多大，mouseover,mouseout在子元素还是会触发，而mouseenter,mouseleave在子元素还是不会触发。②若从父元素到子元素则会触发父元素的mouseout事件再触发子元素的mouseover事件，若从子元素到父元素则会触发子元素的mouseout事件再出来子元素的mouseover事件。贴出我改动的代码，感兴趣的可以按照自己需求改，得出自己的结论。
1 <html> 2 <head> 3 <style> 4 .over > h2 { 5 position: absolute; 6 z-index: 10; 7 display: none; 8 } 9 .enter > h2{ 10 position: absolute; 11 z-index: 10; 12 } 13 </style> 14 <script type="text/javascript" src="/jquery/jquery.js"></script> 15 <script type="text/javascript"> 16 x=0; 17 y=0; 18 $(document).ready(function(){ 19 $("div.over").mouseover(function(e){ 20 $("div.over").find("h2").css('display', 'block'); 21 $(".over span").text(x+=1); 22 alert('over'+ e.target); 23 }); 24 $("div.over").mouseout(function(e) { 25 $("div.over").find("h2").css('display', 'none'); 26 alert('out'+e.target); 27 }); 28 $("div.enter").mouseenter(function(){ 29 $(".enter span").text(y+=1); 30 alert('enter'); 31 }); 32 $("div.enter").mouseleave(function(){ 33 alert('leave'); 34 }) 35 }); 36 </script> 37 </head> 38 <body> 39 <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p> 40 <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p> 41 <div class="over" style="background-color:lightgray;padding:20px;40%;float:left;height: 100px"> 42 <h2 style="background-color:white;height: 90px;">被触发的 Mouseover 事件：<span></span></h2> 43 </div> 44 <div class="enter" style="background-color:lightgray;padding:20px;40%;float:right;height: 100px"> 45 <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2> 46 </div> 47 </body> 48 </html>
最后我得出了结论是因为事件的冒泡导致的，和层叠颜样式并无关系。然后我进行了改进使用一个空的透明DIV，宽高与li元素一样大小，覆盖在其上，z-index为2，.tipbox的z-index为1。最后对空的透明DIV使用JQ的hover()方法和mousemove()方法可完美解决。（注意：hover()方法是用来替代mouseenter,mouseleaver事件的，因此没有冒泡存在）.
HTML结构：
1 <ul> 2 <li class="first"> 3 <img src="./image/ep.jpg" alt=""> 4 <!-- 空的透明DIV --> 5 <div class="zzc"></div> 6 <div class="tipbox"></div> 7 </li> 8 <div class="firBox"> 9 <img src="./image/ep.jpg" alt=""> 10 </div> 11 </ul>
.zzc的CSS样式：
1 .zzc { 2 width: 100%; 3 height: 100%; 4 left: 0; 5 top: 0; 6 z-index: 2; 7 cursor: crosshair; 8 }
.tipbox的CSS样式：
.tipbox { width: 80px; height: 60px; bottom: 0; left: 0; background: rgba(0,0,0,0.5); display: none; z-index: 1; }
看来虽然内容不多，但是在第一次做的过程中还是躺了，然后各种找办法解决。分析完且解决完后有稍微记录了下大概是什么问题，问题出在哪里。但是有了一点知识的沉淀后，你再去看，再分析，再去测试会发现不同的东西，推翻以前的结论，往深处又走了一步，这时候我感觉我获得的成就感会是double, 这是我这次记录所获得的最大感受。