　　　　　　　　JQuery仿购物网站放大镜特效所遇问题及思考

　　　　先贴下效果图，然后描述起来也就不会不知道我在说什么了。

　　　　我碰到的问题一: 一开始我自己总结了是因为两个小原因导致的①使用了mouseover,mouseout事件②因为层叠样式（z-index）的原因。一开始的HTML结构如图：

 <ul>

     <li class="first">

         <img src="./image/ep.jpg" alt="">

         <div class="tipbox"></div>

     </li>

     <div class="firBox">

         <img src="./image/ep.jpg" alt="">

     </div>

 </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事件。贴出我改动的代码，感兴趣的可以按照自己需求改，得出自己的结论。

 <html>

   <head>

     <style>

           .over > h2 {

            position: absolute;

            z-index: 10;

           display: none;

         }

          .enter > h2{

            position: absolute;

            z-index: 10;

          }

     </style>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

   x=0;

   y=0;

 $(document).ready(function(){

   $("div.over").mouseover(function(e){

     $("div.over").find("h2").css('display', 'block');

     $(".over span").text(x+=1);

     alert('over'+ e.target);

   });

   $("div.over").mouseout(function(e) {

      $("div.over").find("h2").css('display', 'none');

     alert('out'+e.target);

   });

   $("div.enter").mouseenter(function(){

     $(".enter span").text(y+=1);

     alert('enter');

   });

   $("div.enter").mouseleave(function(){

     alert('leave');

   })

 });

 </script>

    </head>

    <body>

        <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>

        <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>

        <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left;height: 100px">

            <h2 style="background-color:white;height: 90px;">被触发的 Mouseover 事件：<span></span></h2>

        </div>

        <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right;height: 100px">

             <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>

46        </div>

    </body>

 </html>

　　　　最后我得出了结论是因为事件的冒泡导致的，和层叠颜样式并无关系。然后我进行了改进使用一个空的透明DIV，宽高与li元素一样大小，覆盖在其上，z-index为2，.tipbox的z-index为1。最后对空的透明DIV使用JQ的hover()方法和mousemove()方法可完美解决。（注意：hover()方法是用来替代mouseenter,mouseleaver事件的，因此没有冒泡存在）.

　　　HTML结构：

 <ul>

     <li class="first">

         <img src="./image/ep.jpg" alt="">

         <!--  空的透明DIV -->

         <div class="zzc"></div>

         <div class="tipbox"></div>

     </li>

     <div class="firBox">

         <img src="./image/ep.jpg" alt="">

     </div>

 </ul>

　　　　.zzc的CSS样式：

 .zzc {

     width: 100%;

     height: 100%;

     left:;

     top:;

     z-index:;

     cursor: crosshair;

 }

　　　　.tipbox的CSS样式：

.tipbox {

    width: 80px;

    height: 60px;

    bottom:;

    left:;

    background: rgba(0,0,0,0.5);

    display: none;

    z-index:;

}

　　　　看来虽然内容不多，但是在第一次做的过程中还是躺了，然后各种找办法解决。分析完且解决完后有稍微记录了下大概是什么问题，问题出在哪里。但是有了一点知识的沉淀后，你再去看，再分析，再去测试会发现不同的东西，推翻以前的结论，往深处又走了一步，这时候我感觉我获得的成就感会是double, 这是我这次记录所获得的最大感受。