使用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元素

回答

相关问题