滑鼠從一個元素四周哪邊進入 定位的子項目跟著從這邊進來 離開也是一樣的，元素哪邊

滑鼠從一個元素四周哪邊進入 定位的子項目跟著從這邊進來 離開也是一樣的，元素哪邊

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document change</title><style type="text/css">*{margin:0px;padding:0px}ul {list-style-type:none}ul li,ul a,ul span {width:280px;height:180px;border-radius:20px}ul li{float:left;overflow:hidden;margin:20px 0px 0px 20px;}ul a{display:block;position:relative}ul a span{position:absolute;background:url("6.png") no-repeat}</style></head><body><ul>    <li><a href="http://alisa.uehtml.com/"><img src="1.jpg" alt="" /><span> 0</span></a></li>    <li><a href="javascript://"><img src="2.jpg" alt="" /><span> 1</span></a></li>    <li><a href="javascript://"><img src="3.jpg" alt="" /><span> 2</span></a></li>    <li><a href="javascript://"><img src="4.jpg" alt="" /><span> 3</span></a></li>    <li><a href="javascript://"><img src="4.jpg" alt="" /><span> 4</span></a></li>    <li><a href="javascript://"><img src="3.jpg" alt="" /><span> 5</span></a></li>    <li><a href="javascript://"><img src="2.jpg" alt="" /><span> 6</span></a></li>    <li><a href="javascript://"><img src="1.jpg" alt="" /><span> 7</span></a></li>    <li><a href="javascript://"><img src="2.jpg" alt="" /><span> 8</span></a></li>    <li><a href="javascript://"><img src="3.jpg" alt="" /><span> 9</span></a></li>    <li><a href="javascript://"><img src="4.jpg" alt="" /><span> 3</span></a></li>    <li><a href="javascript://"><img src="4.jpg" alt="" /><span> 4</span></a></li>    <li><a href="javascript://"><img src="3.jpg" alt="" /><span> 5</span></a></li>    <li><a href="javascript://"><img src="2.jpg" alt="" /><span> 6</span></a></li>    <li><a href="javascript://"><img src="1.jpg" alt="" /><span> 7</span></a></li>    <li><a href="javascript://"><img src="2.jpg" alt="" /><span> 8</span></a></li>    <li><a href="javascript://"><img src="3.jpg" alt="" /><span> 9</span></a></li>    <li><a href="javascript://"><img src="4.jpg" alt="" /><span> 3</span></a></li>    <li><a href="javascript://"><img src="4.jpg" alt="" /><span> 4</span></a></li>    <li><a href="javascript://"><img src="3.jpg" alt="" /><span> 5</span></a></li>    <li><a href="javascript://"><img src="2.jpg" alt="" /><span> 6</span></a></li>    <li><a href="javascript://"><img src="1.jpg" alt="" /><span> 7</span></a></li>    <li><a href="javascript://"><img src="2.jpg" alt="" /><span> 8</span></a></li>    <li><a href="javascript://"><img src="3.jpg" alt="" /><span> 9</span></a></li></ul><script type="text/javascript" src="jquery-1.8.3.min.js"></script><script type="text/javascript">   function getpos(ev) {        var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;        var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;        return {            x: ev.clientX + scrollleft,            y: ev.clientY + scrolltop        }    }(function($,undefined){    $('ul > li').mouseenter(function(e){        var pos = [this.offsetLeft,this.offsetTop,getpos(e).x,getpos(e).y,this.offsetWidth,this.offsetHeight],lock = 0,px = 20,mv = $(this).find('span');            //console.log(this.offsetWidth+"sss"+this.offsetHeight)        if (pos[0] <= pos[2] && pos[0]+px >= pos[2] && !lock) {            mv.css({right:pos[4]+'px',top:'0px',left:'auto',bottom:'auto'});            lock = 1;            mv.stop(true,false).animate({right:'0px'},300);                    }        if (pos[0]+pos[4] >= pos[2] && pos[0]+pos[4]-px <= pos[2] && !lock) {            mv.css({left:pos[4]+'px',top:'0px',right:'auto',bottom:'auto'});            lock = 1;            mv.stop(true,false).animate({left:'0px'},300);                    }        if (pos[1] <= pos[3] && pos[1]+px >= pos[3] && !lock) {            mv.css({bottom:pos[5]+'px',left:'0px',top:'auto',right:'auto'});            lock = 1;            mv.stop(true,false).animate({bottom:'0px'},300);        }        if (pos[1]+pos[5] >= pos[3] && pos[1]+pos[5]-px <= pos[3] && !lock) {            mv.css({top:pos[5]+'px',left:'0px',bottom:'auto',right:'auto'});            lock = 1;            mv.stop(true,false).animate({top:'0px'},300);        }        return    });    $('ul > li').mouseout(function(e){        var pos = [this.offsetLeft,this.offsetTop,getpos(e).x,getpos(e).y,this.offsetWidth,this.offsetHeight],lock = 0,px = 15,mv = $(this).find('span');        if (pos[0] > pos[2] && !lock) {            mv.css({top:'0px',left:'auto',bottom:'auto'});            lock = 1;            mv.stop(true,false).animate({right:pos[4]+'px'},300);        }        if (pos[0]+pos[4] <= pos[2] && !lock) {            mv.css({top:'0px',right:'auto',bottom:'auto'});            lock = 1;            mv.stop(true,false).animate({left:pos[4]+'px'},300);        }        if (pos[1] > pos[3] && !lock) {            mv.css({left:'0px',top:'auto',right:'auto'});            lock = 1;            mv.stop(true,false).animate({bottom:pos[5]+'px'},300);        }        if (pos[1]+pos[5]-px <= pos[3] && !lock) {            mv.css({left:'0px',bottom:'auto',right:'auto'});            lock = 1;            mv.stop(true,false).animate({top:pos[5]+'px'},300);        }        return    });})(jQuery);</script></body></html>

多些熊偉哥的幫忙 剛開始我的邏輯是通過盒子的四個角座標進行判斷,沒有想到通過四個地區進行的。

另外JS只有IE支援mouseenter事件，Google和Firefox貌似都不支援。因為mouseover會有冒泡發生，寫這個效果，會有點抖，我用原生的試過了。最好用jquery來實現這個效果。

效果為：http://alisa.uehtml.com/

怎判斷滑鼠停在一個元素上？

我想做一個遮罩,當滑鼠移到某個元素上時,這個遮罩顯示出來.但是這個遮罩會然後你需要在在遮罩層上寫個onmousemove事件方法,方法實現的原理為,擷取A
 
div父元素相對定位 子項目絕對位置孫子項目怎辦

1、“孫”子項目繼承子項目。
2、是的。但是你可以把多個子項目放置在一個容器裡。

你先要弄清楚容器或者說元素的這種父子或同級關係。
比如第一個問題，你對一個元素定了位，那麼包含在這個元素裡的所有內容都是跟著這個元素走的，除非你再對裡面的內容做另外的定位。
理解了這一點，其實你的問題就一個問題，定位