Javascript 悬停函数保持打开状态

下面是我使用HTML和CSS创建的几个信息框的代码。是否可以让hover div保持打开状态，直到您单击底部的close，然后它会再次向上滑动并隐藏自己？仅仅使用纯CSS就可以实现这一点吗？如果不是，是否可以使用香草JavaScript？任何有帮助的，干杯

。一切都好{
文本对齐：居中；
高度：1000px；
背景色：#fcfc；
}
.一切：悬停{
游标：默认值；
}
.信息框列表{
显示：内联块；
文本对齐：居中；
}
ul，ol，li{
保证金：0；
填充：0；
列表样式位置：外部；
列表样式类型：无；
}
h1、h2、h3、h4、h5、h6、ul、li、ol、表单、字段集{
保证金：0；
填充：0；
}
*，*：之前，*：之后{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
菜单，目录{
显示：块；
列表样式类型：disc；
-之前的webkit保证金：1em；
-webkit后的页边距：1em；
-webkit保证金开始：0px；
-webkit页边距结束：0px；
-webkit填充开始：0px；
}
.hr{
边框颜色：rgba（255255,0.3）；
左边距：9px；
宽度：210px；
}
身体{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：16px；
填充：0；
保证金：0；
背景色：#fcfc；
颜色：#555；
最小宽度：20em；
}
.信息框李{
宽度：310px；
身高：535px；
背景：#e2ecf6；
边框：0px实心#efef；
边界半径：4px；
保证金：0px 0px；
光标：指针；
位置：相对位置；
溢出：隐藏；
变换：比例（0.75）；
}
.ptext
{
文本对齐：居中；
字体大小：20px；
}
轮廓
{
利润率最高：10%；
左边距：1px；
宽度：75px；
高度：75px；
}
演出
{
左边距：1px；
利润率最高：10%；
宽度：75px；
高度：75px；
}
.学习
{
利润率最高：10%；
宽度：75px；
高度：75px；
}
团队
{
利润率最高：10%；
宽度：75px；
高度：75px；
}
.小图标
{
宽度：50px；
高度：50px；
}
.profileclose{
页边空白：215px；
}
.infobox列表li{
显示：内联块；
}
a{
颜色：白色；
文字装饰：无；
字体重量：较轻；
}
.信息箱李.信息箱{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
身高：535px；
宽度：310px；
}
.info box li.info box:在{
内容：''；
位置：绝对位置；
左：20%；
宽度：160%；
身高：188%；
背景色：rgb（255、255、255）；/*回退*/
背景色：rgba（255、255、255、0.2）；
排名：0；
-webkit变换：旋转（46度）；
-moz变换：旋转（46度）；
变换：旋转（30度）；
} 
.信息框李：悬停.阴影{
动画名称：windowshade；
光标：指针；
}
.信息框li.阴影，
.信息框李：悬停.阴影{
动画计时功能：立方贝塞尔（0.215,0.61,0.355,1）；
动画持续时间：1s；
动画迭代次数：1；
动画填充模式：正向；
}
第p节{
线高：1.3em；
颜色：#6d6e71；
宽度：100%；
填充：0 10px；
边缘顶部：5px；
左边距：0px；
文本对齐：左对齐；
}
p{
显示：块；
}
.信息框李.阴影{
位置：绝对位置；
宽度：310px；
身高：555px；
左：0；
排名：0；
背景色：#00688B；
颜色：#fff；
显示：表格；
垂直对齐：中间对齐；
填充：20px 10px 0；
转换：translateY（-340px）；
动画名称：windowshade out；
}
.信息框li.阴影h3{
颜色：#fff；
填充：10px；
字体大小：粗体
}
.信息框li.阴影p{
颜色：#fff；
线高：3em；
字体重量：较轻；
}
.ie9.信息框li:悬停.阴影{
顶部：245px
}
.信息框李：将鼠标悬停在a上{
文本装饰：无
}
@关键帧windowshade{
0% {
变换：translateY（-535px）
}
100% {
变换：translateY（0）
}
}
@关键帧windowshade out{
0% {
变换：translateY（0）
}
100% {
变换：translateY（-535px）
}
}

学习

培训计划


训练历史


课程反馈


训练热门




团队
团队


团队目标


团队发展


团队训练


批准

CSS不会捕获点击，所以您所要做的就是在悬停时向元素添加一个类（比如

.open

），并在单击时删除该类