如何禁用css文件的悬停效果？ [英] How to disable hover effect from a css file?

问题描述

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

How can I disable the hover effect from a css file, and get a second `css file's hover attribute to work on the html element.

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 hover效果被禁用。请注意，我不能更改 style.css 。

Now according to the above code I want the style.css hover effect to be disabled. Note that I can't change the style.css.

推荐答案

您不能禁用一个规则，您只能覆盖它。如果你有css顺序的控制，你可以添加新规则上一个。

You can't disable one rule, you can only override it. If you have control in the css order you could add the new rule after the previous one. If two declarations have the same weight, origin and specificity, the latter specified wins.

如果两个声明具有相同的权重，起源和特异性， jsdata-hide =false>

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>

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

If you can't be sure for the order of rules, you have to increase specificity of new rule.

概念

The concept

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

Specificity is the means by which a browser decides which CSS property values are the most relevant to an element and therefore will be applied. Specificity is only based on the matching rules which are composed of css selectors of different sorts.

如何计算？

特殊性是应用于给定CSS声明
的权重，基于每个选择器类型的计数。在特殊情况下，
相等，在CSS中找到的最新声明应用于
元素。特异性仅适用于同一元素。
直接定位元素的CSS规则将始终优先于元素从祖先继承的规则
。

The specificity is a weight that is applied to a given CSS declaration based on the count of each selector type. In the case of specificity equality, the latest declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted. CSS rules that directly target an element will always take precedence over rules that an element inherits from an ancestor.

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 - 特异性 - w3.org - 级联顺序

这篇关于如何禁用css文件的悬停效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！