我在Google Chrome扩展程序中使用jQuery
来覆盖网站的默认CSS
。
.CatalogHoverContent
的默认课程为display: none;
,但当课程.SmallCatalogItemView
或.CatalogItemInner
悬停时,会更改为display: block;
我试图通过使用下面的代码覆盖样式来阻止这种情况,但是网站的默认样式似乎覆盖了这个并且CatalogHoverContent
类仍然没有显示默认情况下。
.CatalogHoverContent {
display: block;
}
是否有另一种编辑样式的方法,例如JavaScript?
答案 0 :(得分:2)
触发器是CSS。以下屏幕截图中的两个:hover
附有<div>
个规则: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;
}
要停止运行此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.