JavaScript悬停函数保持打开状态，直到单击按钮

下面是我使用HTML和CSS创建的几个信息框的代码。是否可以让悬停div保持打开状态，直到单击关闭按钮？这可以在香草JavaScript中实现吗？我是JavaScript新手，所以任何东西都有帮助，干杯

.一切{ 文本对齐：居中； 高度：1000px； } .一切：悬停{ 游标：默认值； } .信息框列表{ 显示：内联块； 文本对齐：居中； } ul， ol,， 李{ 保证金：0； 填充：0； 列表样式位置：外部； 列表样式类型：无； } h1， h2， h3， h4， h5， h6， ul， 锂， ol,， 类型 字段集{ 保证金：0； 填充：0； } *, *：之前， *：之后{ -moz框大小：边框框； -webkit框大小：边框框； 框大小：边框框； } ul， 菜单 迪尔{ 显示：块； 列表样式类型：disc； -之前的webkit保证金：1em； -webkit后的页边距：1em； -webkit保证金开始：0px； -webkit页边距结束：0px； -webkit填充开始：0px； } .hr{ 边框颜色：rgba255、255、255、0.3； 左边距：9px； 宽度：210px； } 身体{ 字体系列：Arial、Helvetica、无衬线字体； 字体大小：16px； 填充：0； 保证金：0； 背景色：FCFC； 颜色：555； 最小宽度：20em； } .信息框李{ 宽度：310px； 身高：535px； 背景：F2F2； 边框：0px实心EF； 边界半径：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； } .信息框li.信息框：之前{ 内容：； 位置：绝对位置； 左：20%； 宽度：160%； 身高：188%； 背景色：rgb255、255、255； /*退路*/ 背景色：rgba255、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； 背景色：6caf46； 颜色：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% { 转换：translateY0 } } @关键帧windowshade out{ 0% { 转换：translateY0 } 100% { 变换：translateY-535px } } 包装纸{ 保证金：0自动； } 包装机{ 宽度：100%； /*随着父图像变小，图像现在将缩小*/ } 学习

培训计划

训练历史

课程反馈

训练热门

团队

团队

团队目标

团队发展

团队训练

批准

---

这有点长，但这里有一个

基本上，您需要定义两个事件处理程序，以便鼠标指针打开并单击以关闭事件，然后更改CSS以解决此问题。我会发布并解释更新中的每一点

对于打开和关闭处理，只需添加和删除hover类，而不是使用伪类：

function open(e){
  let li = e.target;
  li.classList.add('hover');
}

function close(e){
  const hoverable = e.target.closest('li.hover');
  hoverable.classList.remove('hover');
}

然后将CSS中的：hover伪类更改为使用。hover改为：

.info-boxes li.hover .shade {
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

添加事件处理程序等操作非常简单：

const infoBoxListItems = document.querySelectorAll('.info-boxes li');
const closeButtons = document.querySelectorAll('.profileclose');

infoBoxListItems.forEach(li => {
  li.addEventListener('mouseenter', open);
});

closeButtons.forEach(btn => {
  btn.addEventListener('click', close);
});

---

我的完整示例包括最近的polyfill，但这是MDN的直接副本，因此您可以在那里阅读

是的，有可能。到目前为止你试过什么？您可以监听关闭按钮的单击并隐藏或销毁DOM。由于某种原因，悬停功能似乎不起作用。您使用的是现代浏览器吗？它在Chrome上运行良好：最新版本。如果你有一个不同的，你可能需要为一些我用来节省打字的东西进行多边形填充。我正在使用IE，但我需要它来为Edge和Safari工作。我主要关心的是它是否能与IE一起工作。老实说，我在IE兼容版本中所做的一切都是可能的，但如果你没有客户的严格限制，使用Modernizer或Babel来polyfill可能会更容易。在更新中添加了babel的cdn版本：如我所说，从包含Modernizer或babel开始。可以不使用这些，但a我不能测试它，因为我没有IE为您测试，b它消除了IE带来的很多bug。