Question

假设我有一些CSS ...

button:hover { font-weight: bold }

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

<button disabled>Click me</button>

...仍然会应用:hover CSS。该按钮逐渐消失，但仍可以看到: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 not selector的解决方案。较旧的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 }

示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

注意到我使用if enable pseudo code（:)和hover伪代码（:)代码来执行css。

自从这个帖子被打开以来，我很感激它，但是认为它可能对其他人有所帮助。

Answer 5

使悬停样式与默认样式相同。使用班级名称打开或关闭此功能。

<button class="disabled" disabled>Click me</button>

button.disabled:hover { font-weight: inherit}

Answer 6

另一种方法（但不如使用pointer-events: none;那样有效）是在“禁用”和“禁用时悬停”两者上设置相同的属性：

input:hover{
    color: #0CB;
}

input[type=button]:hover:disabled{
    color: grey;
}

<input type="button" value="Try Me !" />
<input type="button" value="Why not Me ?" disabled/>

这不是最美丽的，但它也有效。

Answer 7

将属性＆＃39;变换：无＆＃39;在你重写的按钮类中。

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

7 个答案: