使用Javascript在MouseOver上方顯示其他元素上方的Html元素

在Espn.com上的this page中，如果您轉到右上角並將鼠標懸停在「myESPN」上方，會出現一個內聯彈出窗口（如果這是它的名稱）（以這種方式看起來連接到初始按鈕）並允許用戶登錄到該站點。使用Javascript在MouseOver上方顯示其他元素上方的Html元素

在html中，它看起來像是一個隱藏的div，當鼠標移動到某個元素上時，該div被顯示並被推到前面，只要鼠標停留在調用元素上，新顯示的元素本身。

我期待着做類似的事情。但是，在用Firebug稍微摸索之後，我無法確定它是如何完成的。我認爲它涉及的JavaScript，也可能jquery - 任何人都可以幫助具體實施？

來源

2009-07-27 Yaakov Ellis

你需要的是一個絕對定位的div元素，它定位你希望它出現的方式。然後用style =「display：none;」隱藏它，在右邊的元素的鼠標懸停上顯示它。使用jQuery那會是：

HTML: 
<div id="layer" style="display: none; position: absolute; top: 10px; left: 300px;">something</div>

 
Javascript: 
$('#elementToHover').mouseover(function() { 
    clearTimeout(timeout); 
    $('#layer').show(); 
});

編輯：
來隱藏它：

 
var timeout; 
$('#elementToHover').mouseout(function() { 
    timeout = setTimeout("hide()", 1000); 
}); 
$('#layer').mouseover(function() { 
    clearTimeout(timeout); 
}); 
$('#layer').mouseout(function() { 
    timeout = setTimeout("hide()", 1000); 
}); 
function hide() { 
    $('#layer').hide(); 
}

或類似的東西...

來源

2009-07-27 10:02:09 fresskoma

這會顯示出來。但是，當鼠標離開第一個元素或顯示的元素時，爲了隱藏它，我需要做些什麼？ – 2009-07-27 10:56:28

一個很好的工具來幫助你是以下Visual Event bookmarklet。它允許您查看與頁面上的元素相關的所有事件。

在頁面上運行時，會顯示覆蓋圖，並且在具有腳本事件的元素旁邊放置小圖標。你可以懸停圖標來查看實際的js。要注意，如果開發者已經足夠優化js，那麼你看到的腳本不會有太大意義。

alt text http://gyazo.com/c9064bb659a346f9737ea65c049b03cd.png

來源

2009-07-27 10:05:11 redsquare

使用Javascript在MouseOver上方顯示其他元素上方的Html元素

回答

相關問題