html - CSS:单击按钮进行过渡并保持样式打开

Question

这听起来可能很奇怪，但本质上，我正在尝试做到这一点，因此当我单击页面上的指定按钮/位置时，它会打开一个包含信息的 CSS 边框框。我知道如何隐藏它，但是就像当你悬停它并且它使用 :hover 属性出现时，我想让它在悬停过渡完成后永久可见。这可以用 CSS 完成吗？还是需要 Javascript？这是我用作入门基础的代码。

#information {
  border: solid 2px #FF8000;
  border-radius: 20px;
  position: absolute;
  height: 48%;
  width: 24%;
  left: =0.6%;
  top: 0.7%;
  padding: 0.4%;
  color: #FFFFFF;
  background-color: rgba(114, 70, 0, 0.3);
  overflow: hidden;
}

#information:hover {
  left: 74.6%;
}

<div id="information">
  <div style=" height: 325px; overflow-x: hidden;" align="left">
    <i>Information</i>
    <br><br>
  </div>
</div>

抱歉，我是这个网站的新手，我还在研究如何设置帖子的格式。

Answer 1

#information {
  border: solid 2px #FF8000;
  border-radius: 20px;
  position: absolute;
  height: 48%;
  width: 24%;
  left: =0.6%;
  top: 0.7%;
  padding: 0.4%;
  color: #FFFFFF;
  background-color: rgba(114, 70, 0, 0.3);
  overflow: hidden;
}

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  left: 74.6%;
}

<input type="radio" id="box">
<label id="information" for="box">
  <div style=" height: 325px; overflow-x: hidden;" align="left">
    <i>Information</i>
    <br><br>
  </div>
</label>

我的解决方案与@Michael Coker 建议的类似。我们可以使用单选按钮来禁用第一次点击后点击标签。我删除了 #information 中的内部 div 以使 HTML W3C 有效。