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

【问题标题】：How to Style a disable DIV element如何设置禁用 DIV 元素的样式
【发布时间】：2015-03-20 22:03:01
【问题描述】：

我可以让输入元素响应: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>

Full Sample 尽我所能

奖金信息

问题是答案 div 没有禁用

Make div content Disable

http://jsfiddle.net/WS47f/

【问题讨论】：

我不认为 div 意味着“禁用”，你不能添加一个“禁用”的 css 类吗？
@sdcr 我的问题是关于 div，而不是输入。
@DavidRobinson 我的问题是如何重复的？重复的建议是关于 Input 元素的，正如您在接受的答案中看到的那样，INPUT 具有 DISABLED 属性，但 DIV 没有。所以你需要一个解决方法。

标签： html css

【解决方案1】：

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

div.divDisable:hover {}

【讨论】：

我会尝试，如果没有禁用属性是有意义的。我再次更改标题。问题不是禁用 DIV。问题是样式禁用 DIV。

【解决方案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>

【讨论】：

【解决方案3】：

要让两者都做同样的事情：

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

这是一个演示：https://jsfiddle.net/cs8rbjkh/

【讨论】：

我没有对你投反对票。但我尝试了你的建议并没有奏效。也许你可以提交一个小提琴代码。
@JuanCarlosOropeza 这是小提琴：jsfiddle.net/cs8rbjkh 在接受的答案和我的答案之间，他们完成了同样的事情，只是方式不同。