我怎样才能消除这个按钮上的这种可怕的悬停效果？

Question

所以我和我的朋友正在 chrome 扩展。详细来说，它适用于 Roblox Devforum，到目前为止，非常好！昨天我们开始了，并且已经在 header 和东西上有了我们的按钮，类似于 Roblox+ 或 RoPro。

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

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

现在我想给按钮添加一点动画，让它看起来很eye-appealing，所以我们添加了一个名为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 class 之类的东西，您也可能不小心用它做了一些事情。

尽管如此，请对此持保留态度。

Answer 2

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

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

我怎样才能消除这个按钮上的这种可怕的悬停效果？

How can I remove this hideous hover effect on this button?

javascript

html

css

json

google-chrome-extension