2016-01-16 123 views
1

我在Chrome浏览器扩展程序中使用jQuery来覆盖网站的默认CSSChrome扩展程序 - 编辑默认HTML

.CatalogHoverContent缺省类是display: none;,但上课的时候.SmallCatalogItemView.CatalogItemInner悬停,它改变display: block;

我已经尝试使用下面的代码覆盖的风格,以防止这一点,但是网站的默认风格似乎是覆盖这个和类CatalogHoverContent仍然不会默认显示。

.CatalogHoverContent { 
display: block; 
} 

是否有其他方法可以编辑样式,如JavaScript?

回答

2

触发器是CSS。有连接到两个<div> S IN下面的截图:hover规则:SmallCatalogItemView:hover.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; 
} 

screenshot

停止这个CSS的运行,有几个选项:

  • 使用JavaScript设置每个元素的style属性:

    var elements = document.querySelectorAll(".CatalogItemInner"); 
    for (var i = 0; i < elements.length; i++) { 
        var el = elements[i]; 
        el.style.border = "none"; 
        // ... 
        // Set the rest of the rules 
    } 
    
  • 使用JavaScript编辑样式表(document.styleSheets[i].cssRules[j].style.removeProperty()MDN)。不过,这需要一些微调。你必须得到正确的指数。 How to change/remove CSS classes definitions at runtime?

  • 删除CatalogItemInner类。这可能会产生意想不到的副作用。

    element.classList.remove("CatalogItemInner"); 
    
  • 看看this并覆盖所有的规则:

    // Something like: 
    addCSSRule(sheet, ".CatalogItemInner", "border: none"); 
    // etc. 
    
+0

@TheCodesee我很抱歉,但你是什么意思?如果你需要知道如何注入CSS,https://stackoverflow.com/questions/115536​​00/how-to-inject-css-using-content-script-file-in-chrome-extension – Hatchet

+0

@TheCodesee请参阅编辑答案。 – Hatchet

+0

非常感谢你,我很感谢你的答案范围,当我遇到更多问题时,我能够提及他们! –