2015-04-23 15 views
3

當我編寫了一個aspx網站時,我遇到了一個問題,即擁有一些元素並顯示在其他元素頂部(由於位置:固定)的div無法看到,儘管我願意相反。應該:懸停和mouseout事件具有相同的「發射」原因?

如果鼠標離開它所包含的區域,該div將不可見。那麼容易,因爲它似乎thoughtwise我用:當我離開的是爲DIV定義的填充區域,進入的元素,或元素(在div中的元素)之間的空間

<div id="xyz" onmouseout="JavaScript: $('#xyz').hide();">....</div> 

這個觸發,... ...。

現在,當我而不是用CSS進行隱藏:

#xyz.HideOnNotHovered { display: none; } 
#xyz.HideOnNotHovered:hover { display: inline-block; } 

按預期工作。因此,我的鼠標指針位於可見的div內的Regardles,只有當它離開div時div纔會消失。

這種情況(我不能在的jsfiddle由於重新參與,我不能擺在那裏的CSS和JavaScript的的復層)一個生產經歷的問題:

當我第一次想到了我有問題認爲懸停事件和懸停的結局例程本質上是相同的(或者onmouseover和:懸停是相同的,並且只有在以下情況下調用onmouseout:懸停結束且僅在相同情況下)。所以我的問題是:是/應該有什麼區別onmouseout和相反的:懸停?

+1

我認爲這些答案,回答你的問題藏漢http://stackoverflow.com/questions/608788/css-hover-vs-javascript-mouseover – LinkinTED

+0

是否已經設置DOCTYPE爲您的文件? –

+0

@LinkinTED這裏的答案很有趣,但沒有看到任何直接回答我的問題。從我讀到的答案和我的想法一樣:mouseover + mouseout =:懸停在本質上(我上面看到的並不總是這種情況,因爲在不同的時間,mouseout會觸發我,而不是在:hover結束時) 。 – Thomas

回答

3

這是jQuery的mouseoutmouseleave事件之間的相同的差異:

  • mouseleave時纔會觸發,當光標離開目標元素 - exemple
  • mouseout是每次觸發光標離開目標元素AND懸停子元素 - exemple

這是JavaScript中的同一行爲:hover(CSS)和onmouseout

  • :hover應用,而光標是有針對性的單元內 - exemple
  • onmouseout是每次觸發光標離開目標元素是懸停的子元素 - exemple

Here's a good referal這個兩個不同的行爲

相關問題