Html 当鼠标离开Firefox时，Css伪类正在更改选择值

我有个有趣的问题要解决

我使用伪类的组合，例如：div[data used=true]：hover:：after来更改我的after元素的内容，当像这样悬停时：

挑选{ 颜色：9E9E9E； 字体大小：16px； 填充：12px； 背景：ffffff； 边界半径：4px； 边框：实心1px； 边框底宽：3倍； 边框颜色：bdbd； 大纲：无； 利润率：4px8px； 高度：48px； 框大小：边框框； 垂直对齐：底部对齐； 线高：21px； } 选择：悬停{ 边框颜色：03A9F4！重要； 颜色：03A9F4！重要； 背景：fff！importrant； 盒影：0px 0px 6px 1px RGBA331502430.36； } 选择：第一种类型{ 左边距：0； } div[使用的数据=真]{ 位置：相对位置； 显示：内联块； } div[使用的数据=真]：：之后{ 内容：✓; 位置：绝对位置； 填充：4px； 背景：FFF； 宽度：15px； 高度：26px； 框大小：边框框； z指数：1； 底部：2px； 线高：17px； 文本缩进：-9px； 字体大小：15px； 颜色：8BC34A； 字号：600； 左：-1px； 转化：translateY-50%； } div[data used=true]：hover:：after{ 内容：✖; 文本缩进：-11px； 线高：17px； 字号：18px； 颜色：2196F3； 背景：fff； 字体大小：400； } 佩利瓦* -威比尔兹- 苯甲醚 柴油机 苯甲醇+液化石油气 苯甲醇+天然气 海布里达 Elektryczny 沃多尔 燃料甲醇 通常会发生什么 在正常情况下，如果没有打开所有这些CSS属性，则当鼠标移动到项目上时，它们将被视为连续选中，并显示蓝色背景

如果单击该项目，它将保持此选定状态。已关闭，将触发JS事件，显示的值为此选定项。 如果再次打开，则项目仍为蓝色

如果在打开时单击“离开”，则所选项目将重置为上一个项目

这里发生了什么事 该漏洞来自两种Firefox行为的交叉：

当div:：内容更改后，将重新计算div及其子级渲染。 A总是考虑他选择的项目，蓝色背景作为当前值。 逐步：

单击，它将打开菜单。 鼠标在项目上移动，这些项目被视为连续选中。 鼠标将退出，因此： ：：内容更改后 重新计算内容 已重置，因此在其关闭状态下显示 和鼠标停留的最后一个元素仍处于选中状态 因此，视觉上关闭的视图将显示最后一个选定的项目。不会触发任何JS事件。 但这不仅仅是一个视觉缺陷。在Firefox上，当鼠标移动到项目上时，elem.value的值会改变

看

如何修复它 这是Firefox的一种行为，除了在Js中创建自己的select之外，你不能做任何反对它的事情

要防止鼠标离开时关闭，请删除：

div[data-used="true"]::after:hover{
    content: "✖";
}

---

这个值并没有改变，对我来说是的，我知道这只是视觉上的缺陷，但它是流动的@SzymonPajka这是一个浏览器错误，我们不能做更多：一般来说，避免使用伪元素。使用子div，并查看。你还有问题吗？编辑。谢谢@Oriol让我检查一下。没有触发JS事件，但值change您的问题令人困惑，因为您似乎在互换使用术语pseudo class和pseudo element，而且您的CSS中有这两个东西。是令人困惑，还是不。。。我想这不是重点。也许这种css属性的组合不是很好，可以用更简单的方式来实现，但这是一种可能的解决方案。我的意思是，这样做并不是不正确的；