实现纯CSS显示/隐藏的最简单方法是什么？

发布于 2024-11-10 12:48:15 字数 619 浏览 4 评论 0原文

我发现了 html5 的

元素，这让我想确定是否可以仅通过 css 实现简单且可重用的显示/隐藏。

我过去创建了一种显示/隐藏机制，通过给两个元素相对定位和一个负 z 索引，然后在悬停时减少前面元素的 z 索引（并增加 z 索引）来显示和隐藏内容悬停时的后部元素）。

但是，该方法仅适用于位于同一位置的元素。是否还有其他技术可以模拟非重叠元素的显示/隐藏？例如，导致显示一段描述性文本的标题。

我希望能够应用显示/隐藏的简单示例代码：

<div id='container'>
<h3 id='show-hide-trigger'>summary</h3>
<p id='show-hide-text'>Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph</p>
</div>

是的，我确实知道 jQuery 存在。

原文

I discovered the <details> element for html5, and that made me want to determine whether it was possible to implement a simple and reusable show/hide via css alone.

I have created a show/hide mechanism in the past for showing and hiding content by giving two elements relative positioning and one a negative z-index, and then decreasing the z-index of the front element on hover (and increasing the z-index of the back element on hover).

However, that method only works for elements that are in the same location. Are there other techniques for simulating show/hide on non-overlapping elements? e.g. a title that causes a section of descriptive text to display.

Trivial example code that I would like to be able to apply a show/hide to:

<div id='container'>
<h3 id='show-hide-trigger'>summary</h3>
<p id='show-hide-text'>Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph Paragraph of detail text paragraph</p>
</div>

And yes, I do know that jQuery exists.

分享到QQ

分享到微博

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

发布评论

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

回首观望 2024-11-17 12:48:15

基于结构有很多选项（对于现代浏览器）。

看看

选择器+选择器 相邻同级选择器
选择器 ~ 选择器 通用兄弟选择器
选择器选择器 后代选择器
选择器 >选择器 子选择器

这些可以与类 / ids / 伪选择器，如 :hover 等，并创建一个大的选项列表。

这是我为展示它们而制作的一个小演示：http://jsfiddle.net/gaby/8v9Yz/

回复收藏 0 原文

新一帅帅 2024-11-17 12:48:15

使用嵌套 div 和目标尝试此操作。
我不是 CSS 专家，因此可能存在各种缺陷，但它似乎有效。

http://jsfiddle.net/NmdxC/6/

#show {display:none ; }
#hide {display:block;}
#show:target {display: block; }
#hide:target {display: none; }

Try this using nested divs and targets.
I'm not a CSS guru, so there may be all kinds of flaws with this, but it seems to work.

http://jsfiddle.net/NmdxC/6/

#show {display:none ; }
#hide {display:block;}
#show:target {display: block; }
#hide:target {display: none; }

回复收藏 0 原文

临走之时 2024-11-17 12:48:15

没有确切代码的 CSS 很难可视化，但是更改从 :hover 悬挂的 display 或 visibility 声明有什么问题吗？

a #myelement{display:none;}
a:hover #myelement{display:block;}

我可能误解了这个问题...需要添加代码吗？

CSS without the exact code is hard to visualize, but what is wrong with changing the display or visibility declarations dangling from a :hover?

a #myelement{display:none;}
a:hover #myelement{display:block;}

I problably misunderstood the question...care to add code?

回复收藏 0 原文

淡紫姑娘！ 2024-11-17 12:48:15

我首先想到的是这样的：

<a class="blah" href="#">Hello<span>Test</span></a>


a.blah {position:relative}
a.blah span {position:absolute;top:50px;left:50px;display:none;}
a.blah:hover span {display:block;}

First thing that springs to mind is something like:

<a class="blah" href="#">Hello<span>Test</span></a>


a.blah {position:relative}
a.blah span {position:absolute;top:50px;left:50px;display:none;}
a.blah:hover span {display:block;}

回复收藏 0 原文

~没有更多了~