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, 这是我这次记录所获得的最大感受。