隐藏按钮时保留背景？ (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

我做了一个fiddle给你，希望对你有帮助。

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

隐藏按钮时保留背景？ (CSS/Javascript)

Keep background when button is hidden? (CSS/Javascript)

javascript

css

background

button