强制删除从远程 css 库继承的元素的悬停 css 效果

Question

我正在使用语义 UI 库，我的 <tr> table 元素在 "selectable" class 上对它们有悬停效果table.

但我想在特定行上禁用此悬停（当它们进入编辑模式时），而不必编辑 css 文件（因为我的范围只有 html/javascript，我只是试图解决一个老问题）

我尝试使用 pointer-events:none;，但在我的例子中，<tr> 中还有其他按钮，它们被禁用了

Javascript 行事件：

$('body').on('click', '#edit_card table tbody tr .link.icon.edit', function(){
    var row = $(this).closest('tr');
    switch_row_to_editing_mode(row);
  })

CSS 来自元素检查器的样式：

Answer 1

如果不编辑 CSS 文件，您将不得不使用内联 CSS（不推荐），但语法为：

<tr style="background: white !important">

...这将停止在悬停时改变颜色

Answer 2

解决方案取决于您如何区分要在哪些行上禁用 css。两个选项是将特殊的 class 添加到 html 中的 <tr> 或使用 JavaScript.

选项 1

在 tr 中添加一个特殊的 class 并制作您自己的 css。

css:

.row_with_exception {
    // custom css
}

html:

<tr class='row_with_exception'></tr>
<tr class=''></tr>
<tr class='row_with_exception'></tr>
<tr class=''></tr>

选项 2

使用 Javascript 更新行的样式。

首先获取要从中删除悬停的行。

elements = [...] // array of jquery elements

然后为每个元素添加自定义 css 使用 JQuery。

elements.map(function (el) {
   el.css(...)
}

Answer 3

如果您想避免更改 css 会搞砸您的工作，请尝试添加一个新的 class 并将其应用于您想要禁用的特定行

你见过CSS disable hover effect吗？

强制删除从远程 css 库继承的元素的悬停 css 效果

Forcefully remove hover css effect of element inherited from remote css library

html

css

jquery

semantic-ui