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

Posted 2023-05-08

【中文标题】强制删除从远程 css 库继承的元素的悬停 css 效果

【英文标题】：Forcefully remove hover css effect of element inherited from remote css library

【发布时间】：2017-06-15 23:47:39

【问题描述】：

我正在使用语义 UI 库，我的 <tr> 表格元素通过表格上的 "selectable" 类对它们产生悬停效果。

但我想在特定行上禁用此悬停（当它们进入编辑模式时），而不必编辑 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 样式：

【问题讨论】：

“minimal reproducible example”代码在哪里？您想要样式化哪些行，而不是样式化？您尝试启用什么 CSS，它在哪里失败？ 如何失败了？

@DavidThomas 好吧，我只是认为没有必要用 Jquery/Javascript 标记这个问题并提供不必要的上下文

不必要的上下文，例如应用于您要设置样式的元素的 HTML 和 CSS？

【参考方案1】：

解决方案取决于您如何区分要禁用 css 的行。两个选项是向 html 中的 <tr> 添加一个特殊类或使用 JavaScript。

选项 1

在 tr 中添加一个特殊的类并制作你自己的 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

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

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

【讨论】：

那么，要覆盖外部 css，我是否将其留空？你把“自定义css”放在哪里

不，你会把你想要的css放在项目上，我不确定你想要什么改变，但你可以做.row_with_exception:hover color: red

【参考方案2】：

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

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

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

【讨论】：

你 - 几乎可以肯定 - 不需要将 !important 添加到内联样式中（而且在我见过的几乎所有情况下，!important 往往反映了一些混乱和可怕的背后场景）。

我认为它可能需要胜过 CSS 文件中的 :hover 样式。我不推荐内联 CSS 或使用 !important （一般而言），而只是想解决 OP 的问题，我认为这会。尽管“双重”不优雅:)

【参考方案3】：

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

你见过CSS disable hover effect吗？