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

Question

我和我的朋友正在制作一个 Chrome 扩展程序。详细来说，它是针对 Roblox Devforum 的，到目前为止，一切都很好！昨天我们开始了，并且已经在标题和其他内容上有了我们的按钮，类似于 Roblox+ 或 RoPro。

但是按钮存在一种情况（不一定是错误，主要是样式问题）。每当您将鼠标悬停在按钮上时，按钮的图标上都会出现一些白色方块，它看起来很丑陋，即使在查看了 Google 上的多篇文章（今天将我们带到这里）之后，我们也不知道导致问题的原因。扩展的代码如下：

修改.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 代码。

现在我想给按钮添加一点动画，让它看起来很吸引眼球，所以我们添加了一个名为modifications.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;
}

这只是向按钮添加一个小的放大动画。

现在我们将它绑定到我们的manifest.json 文件中，如下所示：

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

这最终创建了这个奇怪的盒子，它本来不想添加到这个编程中，看起来像这样：

如何删除它？

Answer 1

首先我要说的是，我的经验绝对不足以对此给出正确的答案，但我也没有足够的声誉来发表评论。

白色方块可能是关键帧吗？它的形状看起来像你给出的尺寸，可能是一些 CSS 视觉错误，可以用一两行代码修复。对我来说，这似乎要么是 Roblox 的事情，要么很可能是 CSS 的事情，但同样，我几乎无法理解这里发生了什么，也没有什么经验。 这可能类似于 Roblox 网站中的 HTML/CSS 类，您也可能不小心用它做了一些事情。

对此持保留态度。

Answer 2

所以基本上，答案只是简单地将其添加到 CSS 中：

.icon {
  --primary-low: transparent !important;
}