CSS禁用悬停效果

use*_*868 34 css hover

我需要禁用鼠标悬停在整个DOM中的特定按钮(而不是所有按钮)上.请让我知道如何使用CSS类实现它.

我的按钮被禁用时,我正在使用下面的CSS类.现在我想删除使用相同类的悬停效果.

.buttonDisabled
 {
 Cursor:text !important; Text-Decoration: None !important; 
 } 
Run Code Online (Sandbox Code Playgroud)

上面的类将负责删除鼠标悬停时的手势和文本下划线.现在我想删除悬停效果.请告诉我.

See*_*ngh 77

我有一个非常简单的解决方案.

只需创建一个新类

.noHover{
    pointer-events: none;
}
Run Code Online (Sandbox Code Playgroud)

并使用它来禁用它上面的任何事件.使用它像:

<a href='' class='btn noHover'>You cant touch ME :P</a>
Run Code Online (Sandbox Code Playgroud)

  • 那么这也禁用了元素上的所有类型的事件.在这种情况下,所有按钮都将变为不可点击. (24认同)
  • @鹿津镜原。这只会禁用您应用该类的元素的事件。我可能不明白您和其他 25 个人对这个解决方案有什么问题。`&lt;div class='hover noHover'&gt;Some content&lt;/div&gt;` 不会影响仅包含 `hover` 类的任何其他元素。 (5认同)
  • @AltimusPrime:问题是该问题要求提供禁用鼠标悬停的解决方案。但此解决方案禁用所有鼠标事件。因此,该按钮甚至不会接收点击事件。 (2认同)

小智 17

为此,我最终使用了内联样式,因为我只希望一个特定元素没有任何悬停单击事件或样式,因为它只是有关页面上看起来像它的其他按钮的说明的一部分,并且给它覆盖优先级。这是哪一个:

<button style="pointer-events:none"></button>
Run Code Online (Sandbox Code Playgroud)

这为我删除了单个元素上的所有样式和绑定的 JavaScript/JQuery 功能,同时不影响页面上的其他元素:)。有关详细信息,请参阅mozilla 参考资料


Paw*_*mar 13

这是取消悬停效果的方法。

.table-hover > tbody > tr.hidden-table:hover > td {
    background-color: unset !important;
    color: unset !important;
}
Run Code Online (Sandbox Code Playgroud)

  • 如果元素已经具有设置了“!important”的属性,并且由于使用的框架库而无法更改它,则它适用,那么这种使用是有保证的。从问题中你可以看到该元素已经包含了 `!important` ,所以这是覆盖它的唯一方法 (2认同)

Sim*_*ghi 8

您可以使用:not选择器来实现:

HTML代码:

<a class="button">Click me</a>
<a class="button disable">Click me</a>
Run Code Online (Sandbox Code Playgroud)

CSS代码(使用scss):

.button {
  background-color: red;
  &:not(.disable):hover {
    /* apply hover effect here */
  }   
}
Run Code Online (Sandbox Code Playgroud)

这样,您可以在未应用指定的类(.disable)时应用悬停效果样式。

  • 这里的 css... 按钮 { 背景颜色:红色;} .button:not(.disable):hover { /* 在此处应用悬停效果 */ } (4认同)
  • :not 选择器用于将样式应用于所有没有在括号之间指定类的元素。在本例中,我们指定所有具有“button”类但不具有“disable”类的元素的悬停样式。希望现在已经清楚了:) (2认同)

Ras*_*sel 7

添加以下内容以在禁用按钮上添加悬停效果

   .buttonDisabled:hover
     {
       /*your code goes here*/
     }
Run Code Online (Sandbox Code Playgroud)

  • 这并不能回答问题。 (9认同)

inf*_*oop 7

要禁用悬停效果,我有两个建议:

  • 如果您的悬停效果是由 JavaScript 触发的,只需使用 $.unbind('hover');
  • 如果您的悬停样式是由类触发的,则只需使用 $.removeClass('hoverCssClass');

使用 CSS!important覆盖 CSS 会使您的 CSS 非常不干净,因此不推荐使用这种方法。您始终可以使用不同的类名复制 CSS 样式以保持相同的样式。


小智 7

执行此 Html,CSS 位于 head 标签中。只需创建一个新类并在 css 中使用以下代码片段:

pointer-events:none;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .buttonDisabled {
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <button class="buttonDisabled">Not-a-button</button>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)


shi*_*obi 6

从您的问题中,我所能理解的是,您已经对要删除的按钮产生了一些悬停效果。为此,要么删除导致悬停效果的 css,要么覆盖它。

对于覆盖,请执行此操作

.buttonDisabled:hover
{
    //overriding css goes here
}
Run Code Online (Sandbox Code Playgroud)

例如,如果您的按钮的背景颜色在悬停时从红色变为蓝色。在覆盖的 css 中,您将把它设为红色,这样它就不会改变。

还要仔细阅读所有编写和覆盖 css 的规则。熟悉什么 css 会有什么优先级。

祝你好运。


小智 5

用于transition: all 100s ease-in-out;覆盖悬停更改。如果您不知道要替换的属性的原始值,这不是解决方案,而是一种解决方法。