如何解决使可点击的div覆盖按钮
我有一个非常熟悉的引导程序模式,在页脚中关闭按钮的左侧有一个提交按钮。但是我为特定的无效表单填充禁用了“提交”按钮,但是我正在考虑做以下事情之一-使按钮显示为启用状态,以便人们可以单击它,并且错误会在工具提示中弹出。或者,我将使按钮保持其熟悉的禁用外观,但是如果有人单击它,它将向他们显示工具提示。无论哪种情况,无论哪种情况,我都需要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>✓ Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>
(我刚把它变成粉红色,所以我可以看到它降落的地方)。目前,这超过了关闭按钮,而不是提交按钮。有什么想法让它紧贴提交按钮吗?
解决方法
我不确定我是否理解你的意思。如果只想隐藏按钮,则可以使用伪元素。
为什么不使用伪元素?
基本上,您可以在按钮内使用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>✓ 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>✓ Submit</button>
</div>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="far fa-times-circle"></i> Close</button>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。