Question

我有一个非常熟悉的引导程序模式，在页脚中关闭按钮的左侧有一个提交按钮。但是我为特定的无效表单填充禁用了“提交”按钮，但是我正在考虑做以下事情之一-使按钮显示为启用状态，以便人们可以单击它，并且错误会在工具提示中弹出。或者，我将使按钮保持其熟悉的禁用外观，但是如果有人单击它，它将向他们显示工具提示。无论哪种情况，无论哪种情况，我都需要div超过“提交”按钮的顶部：

#clickable {
  position: absolute;
  width: 55px;
  height: 25px;
  background-color: pink;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="modal-footer">
  <div id="clickable"></div>
  <button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>&#x2713; Submit</button>
  <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>

（我刚把它变成粉红色，所以我可以看到它降落的地方）。目前，这超过了关闭按钮，而不是提交按钮。有什么想法让它紧贴提交按钮吗？

Answer 1

我不确定我是否理解你的意思。如果只想隐藏按钮，则可以使用伪元素。

为什么不使用伪元素？

基本上，您可以在按钮内使用position: relative使其成为新的空间参考。它将用作内部伪元素的参考，然后使用top / bottom / left / right：0拉伸它，仅此而已。无需仅出于样式目的就添加一些DOM。

.btn-submit:disabled {
  position: relative;
}

.btn-submit:disabled::after {
  background-color: pink;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0; 
}

<div class="modal-footer">
  <button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>&#x2713; Submit</button>
  <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>

如果希望它成为工具提示，则必须同时包装工具提示和按钮：

.tooltip-container {
  display: inline-block;
  position: relative;
}

.tooltip {
  background-color: pink;
  position: absolute;
  left: 0;
  top: 0; 
  width: 55px; //Note that fixing size is probably a bad idea.
  height: 25px;
}

<div class="modal-footer">
  <div class="tooltip-container">
    <div class="tooltip">This is the tooltip.</div>
    <button type="button" id="mapOneSubmit" class="btn btn-success btn-submit mapSubmit" disabled>&#x2713; Submit</button>
  </div>
  <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>

使可点击的div覆盖按钮

1 个答案: