Javascript 如何删除此按钮上的这种可怕的悬停效果

所以我和我的朋友正在做一个chrome扩展.说到细节，这是为Roblox Devforum人准备的，到目前为止，一切都很好！昨天我们开始了，我们已经在头球和其他东西上有了我们的按钮，类似于Roblox+或RoPro.

但是，该按钮存在一种情况(不一定是错误，主要是样式问题).每当你把鼠标悬停在按钮上，按钮图标上就会出现一些白色的方块，看起来很可怕，我们不知道是什么导致了这个问题，甚至在浏览了谷歌上的多篇文章之后，我们今天来到这里.扩展代码如下:

修改.js:

function getFirstulWithClass(cssClass) {
    var elements = document.getElementsByTagName('ul');
    for (var i = 0; i < elements.length; i++) {
        if((' ' + elements[i].className + ' ').indexOf(' ' + cssClass + ' ') > -1) {
            return elements[i];
        }
    }
}

var ul = getFirstulWithClass('icons d-header-icons'); 
if (ul) {
    ul.innerHTML += `
        <li class="header-dropdown-toggle dpp-dropdown">
          <a title="DPPSettings" class="icon">
            <div>
              <img src="https://i.imgur.com/suZBJ8y.png" width="45" height="29" title="DSI" class="DSI">
            </div>
          </a>
        </li>
    `
}

为了澄清这段代码，它所做的只是查找header元素，并将这段HTML代码注入到header中，而不重写原始的Devforum header代码.

现在我想给按钮添加一点动画，使其看起来非常吸引眼球，所以我们添加了一个名为"修改"的新文件.css，如下所示:

@keyframes settingsHover {
  0% {
    width: 45px;
    height: 29px;
  }
  100% {
    width: 48px;
    height: 31px;
  }
}

.DSI:hover {
  animation-name: settingsHover;
  animation-fill-mode: forwards;
  animation-duration: .01s;
}

所有这一切只是添加一个小的放大动画按钮.

现在我们把它放在舱单上.json文件如下:

"content_scripts": [
    {
      "matches": ["https://*.devforum.roblox.com/*"], 
      "css": ["modifications.css"],
      "js": ["modifications.js"]
    }
  ],

这最终创造了一个奇怪的盒子，它本不打算被添加到这个程序中，看起来是这样的:

我怎样才能go 掉这个？非常感谢您的帮助！