-2

我正在运行来自第三方的表单。内容位于：https ://safefuturesct.org/donatenow/ 我的捐赠按钮不知何故变成了页面顶部的隐藏悬停按钮。关于如何在永久显示的表格下恢复捐赠按钮的任何建议？

<div id="bbox-root">
<script type="text/javascript">
window.bboxInit = function ()
{
   bbox.showForm('ed52b736-7342-4bc3-a24d-8d669eb3d316');
};
(function () {
   var e = document.createElement('script'); e.async = true;
   e.src = 'https://bbox.blackbaudhosting.com/webforms/bbox-min.js';
   document.querySelector('head').appendChild(e);
} ());
</script>
</div>
4

1 回答 1

0

您的页面在此 URL 处包含一些 CSS：

https://safefuturesct.org/wp-content/themes/psychologycare/style.css

规则之一是：

input[type="submit"]{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 1px solid;
    cursor: pointer;
    z-index: 1;
}

使您的opacity: 0按钮完全透明，并且它还包含使其显示在顶部的定位规则。

这条规则是让悬停从不同的 CSS 文件中显示出来的原因：

.BBFormContainer[data-bbox-part-id="ed52b736-7342-4bc3-a24d-8d669eb3d316"] .BBFormSubmitbutton:hover {
    opacity: .85;
}

调试导致某些样式出现的最佳方法是使用您的开发人员工具并查看计算的样式；这将向您指出元素的有效样式以及应用这些样式的规则所在的位置。

要使按钮不透明，您必须编辑、删除或覆盖样式。

更新

您可以尝试对您的 CSS 进行类似的操作来覆盖有问题的样式。很难验证/测试，因为这是 CSS，并且可能有很多事情会影响您的样式：

input.BBFormSubmitbutton[type="submit"] {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    opacity: 1;
    z-index: auto;
}
于 2020-01-27T20:10:22.830 回答