如何为禁用的 DIV 元素设置样式

Question

我可以让一个输入元素对:hover和:hover:disable做出响应。

但是，看起来一个div不会有相同的反应。

.btn {
  width: 99px;
  border-color: 2px #787878;
  background-color: #CACACA;
  margin-left: 76px;
  margin-top: 21px;
  position: relative;
  border-radius: 26px;
  -moz-border-radius: 26px;
  -webkit-border-radius: 26px;
  cursor: pointer;
}
.btn:hover:disabled {
  background: red;
  cursor: no-drop;
}

<div class="btn" id="divDisable" style=" height: 30px;line-height: 30px; text-align: center;" disabled>Disabled
</div>

<input class="btn" id="iDisabled" type="submit" value="Disabled" disabled>

完整示例包含我尝试的所有内容。

额外信息

问题是回答div没有禁用选项。

使div内容禁用

http://jsfiddle.net/WS47f/

- Juan Carlos Oropeza

---

我认为div不应该被“禁用”，你不能添加一个“禁用”的CSS类吗？ - Eduardo Wada

@sdcr 我的问题是关于 div，而不是 input。 - Juan Carlos Oropeza

@DavidRobinson 我的问题为什么被认为是重复的？重复建议是关于一个输入元素的，正如你在接受的答案中所看到的，INPUT有DISABLED属性，但DIV没有。所以你需要一个解决办法。 - Juan Carlos Oropeza

Answer 1

元素没有disable属性。在这种情况下，您可以为CSS添加一个类。

div.divDisable:hover {}

- Cjmarkham

---

我会尝试一下，如果没有禁用属性的话就有意义。我再次更改了标题。问题不在于禁用DIV。问题在于样式化一个禁用的DIV。 - Juan Carlos Oropeza

Answer 2

也许有点晚了，但解决方法是使用.btn[disabled]:hover而不是.btn:disabled:hover。第一个不会检测禁用状态（在div上不存在），而是针对disabled属性的存在进行定位。

.btn {
  width: 99px;
  border-color: 2px #787878;
  background-color: #CACACA;
  margin-left: 76px;
  margin-top: 21px;
  position: relative;
  border-radius: 26px;
  -moz-border-radius: 26px;
  -webkit-border-radius: 26px;
  cursor: pointer;
}
.btn[disabled]:hover {
  background: red;
  cursor: no-drop;
}

<div class="btn" id="divDisable" style=" height: 30px;line-height: 30px; text-align: center;" disabled>Disabled
</div>

<input class="btn" id="iDisabled" type="submit" value="Disabled" disabled>

- Miroslav Jonas

Answer 3

要让两者做同样的事情，请执行以下操作：

    .btn:hover {
  background: red;
  cursor: no-drop;
}

这里有一个演示 Fiddle：https://jsfiddle.net/cs8rbjkh/

- BlackHatSamurai

---

我没有给你点踩。但是我尝试了你的建议，但是没有起作用。也许你可以提交一个fiddle代码。 - Juan Carlos Oropeza

@JuanCarlosOropeza 这是 jsfiddle 链接：https://jsfiddle.net/cs8rbjkh/ 在被采纳的答案和我的答案之间，它们实现了相同的功能，只是方式不同。 - BlackHatSamurai