重置CSS元素的悬停属性

我正在Wordpress网站上工作，并为特定页面添加一些自定义JavaScript和CSS。我是CSS新手，在阅读了很多不同的条目后，仍然无法找出答案。重置CSS元素的悬停属性

我正在使用的主题设置了某些表格元素的悬停属性，现在我需要未设置这些因为它会干扰我创建的页面。如果我删除主题CSS规则，那么一切都很好，但网站的其他部分无法正常工作，另外我不想更改父主题。我无法弄清楚如何删除已经定义的悬停属性。看起来我应该能够制定一个更具体的规则来做我想做的事情，但我似乎也无法做到这一点。我认为这可能是一个简单的问题，但我似乎无法找到答案。

我想覆盖影响表格悬停特性的所有规则。

/* from the theme */ 
table { 
    width: 100%; 
    margin: 1.62em 0 0; 
    border-radius: 4px; 
} 

td, 
th { 
    padding: .5em 1em 
} 

/* this is my problem rule */ 
tbody tr:hover td, 
tbody tr:hover th { 
    background-color: rgba(0, 0, 0, .05) 
}

DEMO：https://jsfiddle.net/4ty7h8oy/4/

来源

2016-03-26 dirkt

不是一个很好的解决方案，但我认为[this]（https://jsfiddle.net/4ty7h8oy/7/）是CSS的最佳选择。 – Harry

这是一种蛮力的方式（这是我期望我必须做的一种）。你的例子显示了它是如何完成的，这对我来说是一个很大的帮助。谢谢@哈里。 – dirkt

请试试这个：

您可以添加自定义类的TR或TD这样，定义的CSS属性，这一点，也不会影响其他TR要TD：

<table border="1" cellspacing="0" cellpadding="0"> 
    <tbody> 
    <tr class="myclass"> 
     <td class="lastMonth">1</td> 
     <td class="thisMonth">A</td> 
    </tr> 
    <tr> 
     <td class="today">2</td> 
     <td class="nextMonth">B</td> 
    </tr> 
    <tr class="myclass"> 
     <td>3</td> 
     <td>C</td> 
    </tr> 
    </tbody> 
</table>

CSS：

tbody tr.myclass:hover td, 
    tbody tr.myclass:hover th { 
    background-color: rgba(56, 25, 44, .05) 
    }

来源

2016-03-26 11:06:02 satya

重置CSS元素的悬停属性

回答

相关问题