Расширение Chrome - Редактировать По умолчанию HTML

Question

Я использую jQuery в расширении Google Chrome для перезаписывания по умолчанию CSS.

Класс по умолчанию для .CatalogHoverContent является display: none;, однако когда класс .SmallCatalogItemView или .CatalogItemInner наведен, он изменяется на display: block;

Я пытался предотвратить это перезапись стиль, используя код, приведенный ниже, однако по умолчанию веб-сайта стиль, кажется, переписывает это, и класс CatalogHoverContent по-прежнему не отображается.

.CatalogHoverContent { 
display: block; 
} 

Есть ли альтернативный способ редактирования стиля, например JavaScript?

Answer 1

Триггер - это 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.