Search code examples
javascripthtmlcssjsongoogle-chrome-extension

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

My friend and I are making a Chrome extension. To get into detail, it’s for the Roblox Devforum, and so far, so good! Yesterday we started, and already have our button on the header and stuff, similarly to Roblox+ or RoPro.

However there is a situation (not necessarily a bug, mainly a styling issue) with the button. Whenever you hover over the button, some white square appears on the icon of the button and it just looks hideous, and we didn’t know what was causing the issue, even after reviewing multiple articles on Google, which brings us here today. The code for the extension is as follows:

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>
    `
}

To clarify this code, all it does is look for the header element, and injects that chunk of HTML code into the header without overriding the original Devforum header code.

Now I wanted to add a little animation to the button so that it looked very eye-appealing, so we added a new file called modifications.css, and looks as follows:


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

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

All this does is add a small enlargement animation to the button.

Now we tie it together in our manifest.json file as so:


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

And this ultimately creates this weird box that was not intended to be added in the programming of this, that looks as so:

enter image description here

How can I remove this?

Solution

  • Basically, the answer this was just simply adding this to CSS:

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