隐藏按钮时保持背景吗？ （CSS / Javascript）

Question

我有一个带有复选框的表格。 首先“提交”按钮被隐藏。 当我选中一个复选框时，至少会出现该按钮。 可以了 但是按钮具有一些背景图像，并且仅在按钮可见时才会显示。 我希望背景图片始终存在。 有没有办法做到这一点？

HTML：

  <div class="wrapper2"><input type = button class="next_button"  name="commit"  value="Submit" onClick="resultFunction();" > 

CSS：

.wrapper2{
    margin-top:  230px;
    text-align: center;
    background: -moz-linear-gradient(left, rgba(89,106,114,1) 0%, rgba(206,220,231,1) 58%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(89,106,114,1)), color-stop(58%,rgba(206,220,231,1)));
}

我忘了在这里添加：

$(".next_button").hide();

$("#question1, #question2, #question3, #question4").change(function () {
          if ($("#question1").is(':checked') ||
              $("#question2").is(':checked') || 
              $("#question3").is(':checked') || 
              $("#question4").is(':checked') 
           ) {
             $(".next_button").show();

          } 
      });

Answer 1

您需要将按钮放在容器中，并为该容器提供背景，并确保容器具有宽度和高度，然后隐藏并仅显示按钮将容器背景保留在那里。

Answer 2

我为您准备了小提琴 ，希望对您有所帮助。

简而言之，只需根据<input type="checkbox" ... />状态切换<input type="submit" ... />的visibility规则。