我可以停止:将鼠标悬停在应用于元素上吗？

Question

假设我有一些CSS ......

button:hover { font-weight: bold }

如何防止:hover样式被随意应用？我的目标用例是禁用该元素.例如,使用此HTML ...

<button disabled>Click me</button>

...... :hoverCSS仍然适用.按钮逐渐消失,但:hover仍然可以看到效果.怎么能停止？

Answer 1

pointer-events:none将禁用所有悬停行为.对残疾人元素非常有用

 button[disabled] { 
      pointer-events: none;

    }

Answer 2

我认为没有办法真正忽略一组风格.

但是,您可以创建一个更具体的样式来覆盖hover样式.

button[disabled]:hover {
  /* turn off button hover styles */
}

Answer 3

我一直在努力解决这个问题,并提出了一个使用css3而不是选择器的解决方案.较旧的IE浏览器不支持它,但您可以使用selectivizr.js(或其他)添加功能

button {
  // styles for  non-disabled buttons
}

button:hover:not([disabled]) {
  // styles for hover on non-disabled
}

button[disabled] {
  cursor: default;
}

Answer 4

在阅读了可用的回复后,我发现它们中没有一个适合我.我一直认为必须有一个简单的解决方案.最后我只是链接了伪类.这非常有效.

button:enabled:hover { font-weight: bold }

例:

.hov:hover { color: red }
.hov2:enabled:hover { color: green }

<p>Without fix</p>
<button class="hov">Hover me</button>
<button class="hov" disabled>Hover me</button>
<p>With fix</p>
<button class="hov2">Hover me</button>
<button class="hov2" disabled>Hover me</button>

注意到我正在使用如果启用伪代码(:)和hover伪代码(:)代码来执行css.

我很欣赏自从这个帖子被打开以来已经有一段时间了,但我认为它可能对其他人有所帮助.