CSS：更改光标样式会影响元素

Question

问题已经解决，但我问这个问题是为了理解是什么造成的，因为它对我来说真的很奇怪。

简单的情况： 我有一个包含图像和一些文本的菜单按钮（一个li元素）。当它徘徊时，我会应用一些风格。单击时，会使用Javascript将新类应用于此类，以使此样式保持不变。

在Internet Explorer 11上，有一个奇怪的问题：一旦点击按钮并应用了样式，当光标离开按钮时，图像/标题向下移动几个像素。

我尝试了很多东西来纠正这个问题，但最终我发现只有当悬停样式和类样式没有使用相同的光标样式时才会发生。

当悬停时，光标设置为指针，但不在类中。如果我不更改两者上的光标，没问题，我是否设置了光标：两者都有指针，也没问题。

即使对我来说，当从右/左按钮退出到另一个按钮时，或者从顶部/底部退出时，图像被移动，然后返回以悬停相同的所选按钮，而不是之前。

所以我的问题是：为什么？为什么更改光标样式可能会影响元素的显示方式？我错过了一些基本的CSS工作方式吗？

这是我的css：

#menuOnglets li:hover 
{
    border-top: 0.3vw solid #fc8002;
    background : linear-gradient(to Top, #3573a4, transparent);
    cursor: pointer;    
}

#menuOnglets .headerSelection
{
    border-top: 0.3vw solid #fc8002;
    background : linear-gradient(to Top, #3573a4, transparent);
    /* cursor: pointer; */
}

有些图片可以更好地理解：

具有基本风格的按钮：

悬停时：

单击并选中时，唯一的区别是在其下方出现div：

如果当鼠标光标退出侧面的按钮时，图像/文字向下移动：