Javascript jQuery/CSS仅当按钮具有特定背景图像时才悬停在按钮上

我正在尝试创建一个按钮和旁边的复选标记（“同意”）。复选标记是隐藏的。根据表单中输入的实时验证，按钮可以有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();
            }
        );
        };

任何帮助都将不胜感激！：）

您可以使用选择器

$("#button_send").hover(
        function() {
        if ($('#button_send[style^="background-image:"][style$="green.png)"]').length > 0) {
            $("#checkmark").show();
        }
        },
        function() {
            if ($('#button_send[style^="background-image:"][style$="green.png)"]').length > 0) {
                $("#checkmark").hide();
            }
        }
    );

---

您可以使用

includes（string）

方法验证if上的值

正如您在代码段中看到的。我将

background

声明为url（green.png），但值为url（“”）<代码>包含将帮助您在没有特定url的情况下进行验证

$（文档）.ready（函数（）{
//$（“#checkmark”）.css（“背景图像”，“url（checkmark.png）”）.hide（）；
console.log（$（“#按钮_发送”）.css（“背景图像”））
if（$（“#按钮_发送”）.css（“背景图像”）.includes（'green.png'））{
$（“发送”按钮）。悬停(
函数（）{
console.log（'hover Good'）
//$（“#选中标记”）.show（）；
},
函数（）{
//$（“#选中标记”）.hide（）；
}
);
};
})

#发送按钮#{
背景图片：url（green.png）；
}

发送

请共享html代码…可以通过CSTO在@Satpal on point comment上进行扩展来更好地处理：当您将背景设置为应该的颜色时，您还应该添加一个相应的类-然后，使用纯CSS，您可以使该类的任何元素在悬停时可见…感谢您的快速回答！该按钮有3种不同的状态（背景图像），这取决于表单中输入的实时验证，我必须澄清，它不是“正常悬停单击”按钮。如果用jQuery做的话会更好…如果你要用javascript在悬停按钮上添加/删除类，你应该能够使用css来制作按钮动画。谢谢！看起来很好，但如果我添加背景图片：url（green.png）；要将#button_发送到CSS中，green.png位于任何其他按钮状态/图像下，并且总是在悬停可见性上触发选中标记，如果我不将其放在那里，选中标记根本不想显示…：）如果您提供更多代码，我将尝试找出可能干扰此按钮的内容并返回。我可以帮你，这样你就可以投票，我们就可以得出答案了（OK；）好像有什么东西在干扰什么东西。尝试使用您的代码执行其他操作后，我将添加更多信息。某些内容与我的代码中的内容冲突-按钮的行为与预期不符。我正试图找出到底是什么问题|非常感谢。它有助于发现并解决这个问题。