Question

这可能听起来很奇怪，但实质上，我试图这样做，当我点击页面上的指定按钮/点时，它会打开一个包含信息的CSS边框。我知道如何隐藏它，但是当你悬停并且使用：hover属性显示时，我想让它在悬停转换完成后保持永久可见。这可以用CSS完成吗？或者是否需要Javascript？以下是我作为入门基础使用的代码。

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

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

Answer 1

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

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

CSS：单击按钮进行转换并保持样式打开

1 个答案: