通过 css 显示隐藏的内容答案

【问题标题】：Showing hidden content via css通过 css 显示隐藏的内容
【发布时间】：2015-05-18 00:31:08
【问题描述】：

所以，为了更好地解释，我附上了一张我想要实现的简单图像。

有一个按钮，三个内容（两个可见，一个隐藏，如上图所示）。

单击按钮时，我想显示位于内容之间的隐藏内容。

是否有可能仅使用 CSS 来实现？

例如，我可以使用 display:none; 将隐藏的内容强制显示出来？

我不确定实现这一目标的最有效方法是什么。

任何建议将不胜感激。

谢谢！

【问题讨论】：

再看我的回答。我为解决方案添加了 JQuery。

标签： css

【解决方案1】：

如果您只想使用 CSS 来实现这一点，那么有一种方法可以使用复选框或单选按钮而不是 HMTL 按钮标签。

这是一个演示https://jsfiddle.net/nileshmahaja/yt76h26n/

HTML

<input type="checkbox" class="check"/>
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>

.box{
    height:50px;
    width:50px;
    background: gray;
    margin-bottom:20px
}

.two{
    display:none;
}

.check:checked ~ .two {
    display:block
}

您可以根据自己的方便设置复选框或单选按钮的样式。

【讨论】：

谢谢尼莱什。我没有想到单选按钮选项。我会记住这一点。另外，checked ~ .two 是否仅指定 .two？我以前从未使用过checked ~。学习新东西 =)
很高兴它对您有所帮助。 .two 是针对我们要显示和隐藏的div。 :checked 选择器将在选中复选框时起作用。

【解决方案2】：

在此处纯粹使用 css 解决方案： How to change an image on click using CSS alone?

但是，如果您不反对它，使用 jquery 只需几行就可以在 3 秒内轻松完成，如下所示！

$("#buttonsid button").click(function(){
    $("#idofhiddencontent").toggle();
});

【讨论】：

我一定会试一试的！ =) 谢谢
出于好奇，您认为 javascript 和 css 在速度和效率方面哪个更好？
我认为您不会注意到小型应用程序在速度方面的差异，但是为了保持“关注点分离”，我建议尽可能保持使用 javascript 的行为。特别是如果您计划添加大量用户交互。
好的，我正在测试这个问题中给出的各种解决方案。我会尽可能多地使用 javascript =) 谢谢布赖恩
没问题。如果你想做很多动画，我会看看：css-tricks.com/myth-busting-css-animations-vs-javascript

【解决方案3】：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.btn{
    display: inline-block;
    padding: 15px 45px;
    border: 2px solid #000;
    color: #000;
    text-decoration: none;
}

div{
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    margin: 25px auto;
}
.block-hidden{
    display: none;
    border: 2px solid #f00;
    color: #f00;
}

.btn:focus ~ .block-hidden{
    display: block;
}

<a href="#" class="btn">Button Click</a>

<div class="block">Block</div>
<div class="block block-hidden">Block Hidden</div>
<div class="block">Block</div>

【讨论】：

谢谢德米特里！ =) 我将实现它并将其与 javascript 进行比较。真的很感激

【解决方案4】：

.visible_content:hover > .hidden_content {display:block;}

当您将鼠标悬停在 .visible_content 上时，将显示 .hidden_content。

但是使用 click ，我认为没有任何方法可以通过 css 做到这一点。

但在 jquery 中，这很简单：

$(".visible_content").click(function(){
    $(".hidden_content").fadeIn();
});

【讨论】：

谢谢！ =) 我会试一试的。欣赏！