仅在未禁用时悬停和活动

182

我使用hover，active和disable来设置Button的样式。

但是问题是禁用按钮时，悬停和活动样式仍然适用。

如何仅在启用的按钮上应用悬停和活动？

css

— 阿里
source

325

您可以使用：enabled伪类，但请注意IE<9不支持它：

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}

— 工程师
source

3

还有:not()选择器，但是再次提醒，自IE9以来也仅受支持。请参阅：developer.mozilla.org/en-US/docs/Web/CSS/

— not

button:hover:enabled在我的情况下似乎不起作用。在IE11下使用IE9仿真。

— Neolisk

75

.button:active:hover:not([disabled]) {
    /*your styles*/
}

你可以试试看

— Velayutham Anjamani
source

当您希望“悬停禁用”状态看起来与“非悬停禁用”状态相同时，这是一个很好的解决方案。

— Mikhael Loo

我<3此解决方案。允许我使用以下命令：<button class =“ button”>悬停</ button>和<button class =“ button no-hover>不会悬停</ button>，只需使用：not（.no-hover）

— 奔

34

为什么不在CSS中使用属性“ disabled”。这必须在所有浏览器上都有效。

button[disabled]:hover {
    background: red;
}
button:hover {
    background: lime;
}

— 马德夫
source

13

通过一行全部选择来覆盖所有禁用状态：.button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— DBK 2014年

13

较低的特异性的方法，在最先进的浏览器上运行（IE11 +，并排除一些移动歌剧和IE浏览器- http://caniuse.com/#feat=pointer-events）：

.btn {
  /* base styles */
}

.btn[disabled]
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.btn:hover {
  color: red;
}

该pointer-events: none规则将禁用悬停；您无需使用.btn[disabled]:hover选择器提高特异性即可使悬停样式无效。

（仅供参考，这是简单的HTML指针事件，而不是有争议的abstracting-input-devices指针事件）

— 米猜
source

12

在SASS（SSS）中：

 button {
  color: white;
  cursor: pointer;
  border-radius: 4px;

  &:disabled{
    opacity: 0.4;

    &:hover{
      opacity: 0.4;  //this is what you want
    }
  }

  &:hover{
    opacity: 0.9;
  }
}

— 杰克福克
source

10

如果您使用LESS或Sass，则可以尝试以下操作：

.btn {
  &[disabled] {
    opacity: 0.6;
  }
  &:hover, &:active {
    &:not([disabled]) {
      background-color: darken($orange, 15);
    }
  }
}

— 胖子
source

这是SASS中的一个很好的解决方案，因为悬停效果将针对禁用的按钮进行处理，除非您将其包装为not块。

— mbokil

2

一种方法是在禁用按钮并在css中覆盖该类的悬停状态和活动状态的同时添加特殊类。或者在仅在CSS中禁用和指定该类的悬停和活动伪属性时删除该类。无论哪种方式，都可能无法完全使用CSS完成，您需要使用一些js。

— 技术傻瓜
source