Question

如何从css文件中禁用悬停效果，并获取第二个`css文件的悬停属性以处理html元素。

Html -

<p>
    <a href="" title="">demo hover</a>
</p>

的style.css

a:hover{
    color:#000;
    background: #ccc;
    border:none;
   /*Here can be more styling*/ 
}

style_new.css

a:hover{
    color:green;
    background: #ccc;
    border:none;
    padding:4px;
   /*Here can be more styling*/ 
}

现在根据上面的代码，我希望禁用style.css悬停效果。请注意，我无法更改style.css。

Answer 1

您无法禁用一条规则，只能覆盖它。如果您在css顺序中拥有控制权，则可以在上一个规则之后添加新规则。 如果两个声明具有相同的权重，来源和特异性，则后者指定胜出。

a:hover {
  color: #000;
  background: #ccc;
  border: none;
  /*Here can be more styling*/
}
a:hover {
  color: green;
  background: #ccc;
  border: none;
  padding: 4px;
  /*Here can be more styling*/
}

<p>
  <a href="" title="">demo hover</a>
</p>

如果您无法确定规则的顺序，则必须提高新规则的特异性。

概念

特异性是浏览器决定哪个CSS属性的方法   值与元素最相关，因此也是如此   应用。特异性仅基于匹配规则   由不同种类的CSS选择器组成。

如何计算？

特异性是应用于给定CSS声明的权重   基于每个选择器类型的计数。在特异性的情况下   相等，CSS中发现的最新声明适用于   元件。特异性仅适用于目标相同的元素。   直接以元素为目标的CSS规则始终优先   关于元素从祖先继承的规则。

p a:hover {
  color: green;
  background: #ccc;
  border: none;
  padding: 4px;
  /*Here can be more styling*/
}
a:hover {
  color: #000;
  background: #ccc;
  border: none;
  /*Here can be more styling*/
}

<p>
  <a href="" title="">demo hover</a>
</p>

参考：MDN - Specificity - w3.org - Cascading order

Answer 2

这取决于css加载顺序，最后一个始终有效。只需将旧样式放在较旧的样式之后就可以了。

cascading-order

的style.css

a:hover{
    color:#000;
    background: #ccc;
    border:none;
   /*Here can be more styling*/ 
}

style_new.css

a:hover{
    color:green;
    background: #ccc;
    border:none;
    padding:4px;
   /*Here can be more styling*/ 
}

Answer 3

我建议您不要停用:hover，而应将元素的属性设置为与:active，:visited，:linked相同。

例如：

a.mylink{ color:#000; text-decoration:none; cursor: default; }

Answer 4

只需使style_new.css样式变得重要。它会自动覆盖style.css样式。例如：

<强>的style.css

    a:hover{
    color:#000;
    background: #ccc;
    border:none;
   }

<强> style_new.css

 a:hover{
    color:green !important;
    background: #ccc !important;
    border:none !important;
    padding:4px !important;
}

Answer 5

确保style_new.css添加到 style.css后的HTML 中。 HTML和CSS是＆＃34;读＆＃34;从上到下，这意味着无论CSS在第一个CSS之后出现，都会否决第一个CSS。

如果这不起作用，请在a中为class id或style_new.css提供一个目标。

如何从css文件中禁用悬停效果？

5 个答案: