如何在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
{
}

但它没有用。我仍然看到相同的悬停风格。 有没有办法在CSS中删除悬停而不为我的div标签创建一个新的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规则是如何被覆盖的？我把“！important”放在我的规则上。

Answer 1

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

这将覆盖div.MyCSSClass:hover给出的背景颜色。如果你将MyParentCSSClass div.MyCSSClass:hover留空MyParentCSSClass div.MyCSSClass:hover {}，它将不会覆盖任何内容或实际上什么都不做。

Answer 2

您需要将以前添加的所有样式重新写入悬停事件。如果您指定，请执行以下操作：

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

Answer 3

背景颜色：无;不是w3c标准。它可以在某些浏览器上运行，但根据w3c标准，它不是正确的方法。

因此尝试使用background-color：transparent，它可以在所有浏览器上运行良好，w3c可以验证您的代码。

玩得开心。