通过css

Question

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

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

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

单独使用CSS是否可以实现这一目标？

例如，我可以使用display:none;隐藏内容，然后以某种方式强制显示它？

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

任何建议都将受到赞赏。

谢谢！

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

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

Answer 2

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

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

但点击后，我不认为有任何办法可以通过CSS进行此操作。

但在jquery中，很简单：

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

Answer 3

这里纯粹用css解决方案： How to change an image on click using CSS alone?

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

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

Answer 4

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