javascript - jQuery/CSS 仅当具有特定背景图像时才将鼠标悬停在按钮上

Question

我正在尝试创建一个按钮和旁边的复选标记(“同意”)。复选标记被隐藏。该按钮可以有 3 种不同的状态(white.png、red.png、green.png)，具体取决于表单中输入的实时验证。 UPD:这不是一个普通的悬停点击按钮。它是一个提交按钮，还指示表单是否为空或无法发送或可以发送。 只有当按钮的背景图像是“green.png”时，该复选标记才应该在按钮悬停时可见。这是我的非工作代码:

  $(document).ready(function() {
        $("#checkmark").css("background-image", "url(checkmark.png)").hide();
        if ($("#button_send").css("background-image", "url(green.png)")){
        $("#button_send").hover(
            function() {
                $("#checkmark").show();
            },
            function() {
                $("#checkmark").hide();
            }
        );
        };

任何帮助将不胜感激! :)

Answer 1

您可以使用 includes(string) 方法验证 if 上的值。

正如您在代码片段中所见。我将 background 声明为 url(green.png)，但值是 url("https://stacksnippets.net/green.png ")。 includes 将帮助您在没有特定 url 的情况下进行验证

$(document).ready(function() {
      //$("#checkmark").css("background-image", "url(checkmark.png)").hide();
console.log($("#button_send").css("background-image"))

if ($("#button_send").css("background-image").includes('green.png')) {
      $("#button_send").hover(
        function() {
          console.log('hover Good')
          //$("#checkmark").show();
        },
        function() {
          //$("#checkmark").hide();
        }
      );
    };
})

#button_send {
  background-image: url(green.png);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="button_send">Send</button>