html - 如何删除 CSS 中的悬停样式

Question

我已经为 div 元素定义了这个悬停

div.MyCSSClass:hover
{
    background-color: purple;
}

这是我的 HTML 源代码:

   <div class="
    <ul class="MyParentCSSClass">
    <li>
        <div>
          <div>
            <div class="MyCSSClass">
               <!-- I want to remove CSS hover for this div element -->

我想在 div.MyCSSClass 是 MyParentCSSClass 的子级时删除悬停，所以我添加它以删除 CSS 中的悬停样式:

.MyParentCSSClass div.MyCSSClass:hover
{
}

但是没有用。我仍然看到相同的悬停样式。 有没有办法在不为我的 div 标签创建新的 CSS 类的情况下删除 CSS 中的悬停？我想保留与其他 CSS 属性使用“MyCSSClass”相同的名称。

感谢您的建议。我试过了

background-color: none !important;

但是当我查看 chrome 时，CSS 被

覆盖了

.MyGrandParentClass div.MyCSSClass:hover
{
    background-color: purple;
}

html源码是

  <div class="MyGrandParent">
    <ul class="MyParentCSSClass">
    <li>
        <div>
          <div>
            <div class="MyCSSClass">
               <!-- I want to remove CSS hover for this div element -->

我的问题是我的“移除悬停”CSS 规则是如何被覆盖的？我已将“!重要”加入我的规则。

Answer 1

.MyParentCSSClass div.MyCSSClass:hover { 
  background-color: none;
}

这将覆盖 div.MyCSSClass:hover 给定的背景颜色。如果您将 MyParentCSSClass div.MyCSSClass:hover 保持为空 MyParentCSSClass div.MyCSSClass:hover {}，它实际上不会覆盖任何内容或什么也不做。