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

如何创建隐藏菜单元素？

发布于 2024-11-09 06:09:48 字数 28 浏览 0 评论 0原文

当鼠标悬停时应该弹出菜单。至于本站的评论。

原文

分享到QQ

分享到微博

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

发布评论

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

当梦初醒 2024-11-16 06:09:48

或者 JavaScript 的等价物：

<p>Hover me for more text...<span style="display:none" onmouseover="this.style.display='inline'" onmouseout="this.style.display='none'">see, I told you!</span></p>

Or the JavaScript equivalent:

<p>Hover me for more text...<span style="display:none" onmouseover="this.style.display='inline'" onmouseout="this.style.display='none'">see, I told you!</span></p>

回复收藏 0 原文

方觉久 2024-11-16 06:09:48

一个简单的示例如下所示：

HTML

<p>Hover me for more text...<span>see, I told you!</span></p>

CSS

p span { display:none; }
p:hover span { display:inline; }

演示：jsfiddle.net/fWK2e

扩展这个概念，您可以隐藏一个元素，直到它的父元素悬停为止，从而显示更多内容，例如链接或图像等。只需知道 :hover 伪类不适用于较旧的浏览器，因此您必须使用 JS 来解决该问题。

A quick example would look something like this:

HTML

<p>Hover me for more text...<span>see, I told you!</span></p>

CSS

p span { display:none; }
p:hover span { display:inline; }

Demo: jsfiddle.net/fWK2e

Expand on that concept and you can hide an element until it's parent is hovered, revealing more content such as links or images, etc. Just know that the :hover pseudo-class doesn't work on older browsers so you'll have to resolve that with JS.

回复收藏 0 原文

~没有更多了~