Question

我正在使用Wordpress网站并为特定页面添加一些自定义javascript和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/

Answer 1

请试试这个：

您可以像这样在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)
  }

重置css元素的悬停属性

1 个答案: