如何实现这个网站

你怎么实现的效果，当你悬停在链接上方（主页，关于，JOBS）你可以在http://www.webdesignerwall.com/看到，有人可以给我一个提示类似的悬停效果？或者任何？如何实现这个网站

2009-12-16 arnold

每个链接（#nav li a）都包含导航项目文本以及默认设置为“display：none”的附加范围。跨度也有一系列与其位置和背景图像相关的其他样式（这是出现的文本）。

在#nav立一个：悬停跨度变为显示：块，这使得它在限定的位置可见。不需要脚本。

HTML

<ul id="nav"> 
    <li><a href="index.html">Home <span></span></a></li> 
    <li><a href="about.html">About <span></span></a></li> 
    <li><a href="jobs.html">Jobs <span></span></a></li> 
</ul>

CSS：

#nav li a span{display:none} 
#nav li a:hover span{display:block}

当然，这是一个完全精简版，你将需要添加自己的定位和风格等适当。

来源

2009-12-16 15:58:38 akamike

谢谢，当我问这个问题时，我一直是一个懒惰的家伙，现在唯一的问题是处理IE6不支持：悬停。但使用jQuery可能是一个解决方案 – arnold

这可能是对主页，关于这使得浮动div标签的鼠标悬停可见和鼠标移开时看不见的作业环节的脚本。

下面是一个简单的代码示例实现类似的效果：

<html> 
    <body> 
    <a onmouseover="document.getElementById('my-hidden-div').style.display='block'" onmouseout="document.getElementById('my-hidden-div').style.display='none'">Hover Over This</a> 
    <div style="display:none" id="my-hidden-div">and I appear.</div> 
    </body> 
</html>

来源

2009-12-16 15:49:45 jcb

有许多，许多方面，这可能来达到的。最简单的方法是让每个导航项目更改上面的图像以反映其相应的图形。

<div class="hoverImages"> 
    <img src="blank.jpg" style="display:none;" /> 
</div> 

<ul> 
    <li class="home">Home</li> 
    <li class="about">About</li> 
    <li class="contact">Contact</li> 
</ul>

- jQuery的

$("li.home").hover(
    function() { 
    $(".hoverImages img").attr("src", "hoverHome.jpg").show(); 
    }, 
    function() { 
    $(".hoverImages img").hide(); 
    } 
);

来源

2009-12-16 15:50:27 Sampson

使用jQuery你只想做一些像

$(#MenuId).hover(function() { // show hidden image}, 
    function() { // hide hidden image});

来源

2009-12-16 15:53:59 rosscj2533

的事实，你可以翻转整个区域上时翻车，我建议它只是使用css在滚动时出现的替代背景。元素本身可能会被完全放置在导航容器中。

来源

2009-12-16 15:54:41 Josh

在这种特定情况下，开发人员放置一个span标签li元素，使弹出的菜单里。该跨度具有（最值得注意的）这些属性：

height：33px;
top：-26px;
左：这个因人而异定位跨度正常
的位置是：绝对的;

之后，只需一些JavaScript使跨度出现/消失。

来源

2009-12-16 15:56:10 Aaron

它的实现方式是通过使用空<span>。

它的默认定位到屏幕并移动到图上悬停

像这样：

<ul> 
    <li><a href="#">Link<span>&nbsp;</span></a></li> 
    <li><a href="#">Link<span>&nbsp;</span></a></li> 
    <li><a href="#">Link<span>&nbsp;</span></a></li> 
</ul>

而CSS：

ul li a { 
    display: relative; 
    } 

ul li a span { 
    position: absolute; 
    top: -50px; /* or however much above the a you need it to be */ 
    left: -1000em; 
    } 

ul li a:hover span { 
    left: 0; 
    }

来源

2009-12-16 15:58:44