The Codesee The Codesee - 2 years ago 90
CSS Question

Chrome Extension - Edit Default HTML

I'm using

in a Google Chrome extension to overwrite a website's default

The default class for
display: none;
, however when the class
is hovered, it changes to
display: block;

I've attempted to prevent this by overwriting the style using the code below, however the website's default style seems to be overwriting this and the class
still isn't shown by default.

.CatalogHoverContent {
display: block;

Is there an alternative way to edit the style, such as JavaScript?

Answer Source

The trigger is the CSS. There are :hover rules attached to the two <div>s in the screenshot below: SmallCatalogItemView:hover and .CatalogItemInner:hover:

.SmallCatalogItemView:hover .CatalogItemInner.BigInner {
    padding-bottom: 12px;
    padding-top: 10px;

.SmallCatalogItemView:hover .CatalogItemInner.BigInner {
    top: -10px;

.SmallCatalogItemView:hover .CatalogItemInner {
    border: 1px solid #ccc;
    height: auto;
    left: -10px;
    top: -20px;
    width: 130px;
    z-index: 6;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;

.CatalogItemInner:hover {
    position: absolute;

.CatalogItemInner, .CatalogItemInner:hover {
    background: #FFF;
    border: 0;
    outline: 0;
    overflow: visible;
    position: absolute;
    margin: 0;
    padding: 0;


To stop this CSS from running, there are a few options:

  • Use JavaScript to set the style property of each element:

    var elements = document.querySelectorAll(".CatalogItemInner");
    for (var i = 0; i < elements.length; i++) {
        var el = elements[i]; = "none";
        // ...
        // Set the rest of the rules
  • Use JavaScript to edit the stylesheet (document.styleSheets[i].cssRules[j].style.removeProperty() MDN). This will take some fine-tuning, though. You have to get the correct indices. How to change/remove CSS classes definitions at runtime?

  • Remove the CatalogItemInner class. This may have unintended side effects.

  • Take a look at this and overwrite all of the rules:

    // Something like:
    addCSSRule(sheet, ".CatalogItemInner", "border: none");
    // etc.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download