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

【问题标题】：how to achieve a similar hover effect in this website如何在本网站实现类似的悬停效果
【发布时间】：2011-12-23 22:02:56
【问题描述】：

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

【问题讨论】：

标签： html css hover

【解决方案1】：

这里的很多人都太快地摆脱了脚本语言。啧啧啧。这可以通过 CSS 实现。我什至倾向于说不需要额外加价。可以在 :hover 状态下使用背景图像。很简单。

【讨论】：

【解决方案2】：

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

在#nav li a:hover 时，span 变为 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}

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

【讨论】：

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

【解决方案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();
  }
);

【讨论】：

【解决方案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;
    }

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

使用 jQuery 你会做类似的事情

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

在这个特定的例子中，开发人员在构成菜单的 li 元素中放置了一个 span 标签。该跨度具有（最显着的）这些属性：

高度：33px；
顶部：-26 像素；
左：这会改变以正确定位跨度
位置：绝对；

之后，只需一些 JavaScript 即可使 span 出现/消失。

【讨论】：

【解决方案9】：

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

【讨论】：