当前位置：文江博客话题详情

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

发布于 2024-08-14 18:18:52 字数 165 浏览 10 评论 0原文

当您将链接悬停在顶部时如何实现效果（主页，关于，工作）您可以在 http://www.webdesignerwall.com/ 中看到，有人可以给我提示吗？或任何？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

岁月染过的梦 2024-08-21 18:18:52

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

回复收藏 0 原文

烂人 2024-08-21 18:18:52

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

在 #nav li a:hover 上，跨度变为 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}

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

Each link (#nav li a) contains the nav item text plus an additional span which is set to "display:none" by default. The span also has a set of other styles relating to its position and background-image (which is the text that appears).

On #nav li a:hover the span becomes display:block, which makes it visible at the defined position. No scripting needed.

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}

This is a completely stripped down version of course, you will need to add your own positioning and other styles as appropriate.

回复收藏 0 原文

差↓一点笑了 2024-08-21 18:18:52

有很多很多方法可以实现这一目标。最简单的方法是让每个导航项更改上面的图像以反映其相应的图形。

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

There are many, many ways this could be acheived. The simplest would be to have each navigation item change the above image to reflect its corresponding graphic.

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

回复收藏 0 原文

禾厶谷欠 2024-08-21 18:18:52

其实现方式是使用空的。

默认情况下，它位于屏幕外，并在悬停时移入视图，

如下所示：

<ul>
    <li><a href="#">Link<span> </span></a></li>
    <li><a href="#">Link<span> </span></a></li>
    <li><a href="#">Link<span> </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;
    }

The way it's achieved is by using an empty <span>.

It's positioned off screen by default and move into view on hover

Like so:

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

And the 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;
    }

回复收藏 0 原文

海未深 2024-08-21 18:18:52

它可能是“主页”、“关于”和“工作”链接上的一个脚本，使浮动 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>

It is probably a script on the Home, About and Jobs links that makes a floating div tag visible on mouseover and invisible on mouseout.

Here is a simple code example achieving a similar effect:

<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>

回复收藏 0 原文

自演自醉 2024-08-21 18:18:52

使用 jQuery 你只需要做类似的事情

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

Using jQuery you would just do something like

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

回复收藏 0 原文

別甾虛僞 2024-08-21 18:18:52

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

回复收藏 0 原文

深爱成瘾 2024-08-21 18:18:52

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

height: 33px;
顶部：-26px；
左：这会改变跨度的正确位置位置
：绝对；

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

回复收藏 0 原文

野味少女 2024-08-21 18:18:52

Eric Meyer 网站上解释了纯 CSS 解决方案：纯 CSS 弹出窗口 2。

回复收藏 0 原文

~没有更多了~

关于作者

红焚

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。