Question

当您将链接悬停在顶部时，如何实现效果（HOME，ABOUT，JOBS）您可以在http://www.webdesignerwall.com/中看到，有人可以给我一个提示吗？或任何？

Answer 1

这里很多人都非常快速地编写脚本语言。 Tsk，tsk。这可以通过CSS实现。我甚至倾向于说不需要额外的加价。可以在：悬停状态下使用背景图像。简单。

Answer 2

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

在#nav li上：悬停跨度变为display：block，使其在定义的位置可见。无需编写脚本。

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}

当然，这是一个完全剥离的版本，您需要根据需要添加自己的定位和其他样式。

Answer 3

有许多方法可以实现。最简单的方法是让每个导航项更改上面的图像以反映其对应的图形。

<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();
  }
);

Answer 4

实现的方式是使用空的<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;
    }

Answer 5

它可能是Home，About和Jobs链接上的一个脚本，它使鼠标悬停时可见浮动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>

Answer 6

使用jQuery你会做类似

的事情

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

Answer 7

因为你可以在翻转时翻转整个区域，我会建议它只是一个使用css在翻转时出现的替代背景。然后，元素本身可以绝对定位在导航容器中。

Answer 8

在此特定实例中，开发人员在构成菜单的li元素中放置了span标记。这个范围（最值得注意的是）这些属性：

身高：33px;
顶部：-26px;
left：这可以改变以正确定位范围
position：absolute;

之后，只需要一些JavaScript来使跨度显示/消失。

Answer 9

Eric Meyer网站上解释了纯CSS解决方案：Pure CSS Popups 2。

如何在本网站中实现类似的悬停效果

9 个答案: