Jquery div：仅在类型的最后一个上悬停

有一个非常奇怪的问题：

我使用在div中创建的简单退出按钮和jQuery控制的三个元素，但我使用：hover CSS选择器更改hover上的不透明度。问题是，它只处理三个元素中的最后一个。如果我把第三个注释掉，它对第二个有效，依此类推。我在这里加入了一个简化的小提琴链接，以展示我正在使用的东西。我找不到任何解决方案，甚至在任何地方都找不到这个问题的答案，我也不知道是什么原因造成的

演示：

尝试单击每个蓝色框，然后将鼠标悬停在右上角的退出按钮上，您将看到我的意思，即第三个蓝色框的弹出窗口工作，而其他窗口不工作

---

有什么想法吗

这有点奇怪，但似乎无论您选择哪个窗口，

退出btn

总是第三个窗口。 添加

显示：无到类
。工作类型窗口
解决此问题。

请参阅。
您对所有按钮使用的是
位置：固定的
，因此它们位于完全相同的位置，除了您只看到不透明的按钮。另一个仍然是我猜想的方式（IE11在这里可能有不同的行为）

这里的3个退出链接不再是一个在另一个之上，它们中的每一个都可以在样式更改的情况下悬停：

使用
display:none
：屏幕阅读器也有可能更好地使用它（他们不阅读隐藏内容，而他们可能阅读透明内容，而有视力的用户则不阅读：您可能期望所有用户都无法阅读透明内容）
如果您检查元素，其他按钮没有继承：悬停样式。我不知道这是为什么。当你试图在没有bit.ly的情况下向你的小提琴添加链接时，（afaik）会问到，在你的问题中，在不使用另一个URL缩写和相关代码的情况下发布一个指向小提琴的链接