Jquery - 在 div 上触发鼠标输入点击,如果点击任何其他按钮则取消点击

Jquery - Triggering click on mouseenter on div and unclick if clicked on any other button

我想在将鼠标悬停在 div、"div1" 上时触发对 "bigbutton" 的点击。如果我单击任何其他按钮,则需要取消单击 "bigbutton" 并且单击需要移动新单击的按钮。这是我尝试过的:

Html

<div class="div1">
<button id="bigbutton">bigbutton</button>
<button type="button" id="button1">button1</button>
<buttton type="button" id="button2">button2</button>
</div>

Jquery

 $(document).ready(function () {
    $("#bigbutton").click(function () {
        $(this).css("background-color", "red");
    });
    $(".div1").mouseenter(function () {
        $("#bigbutton").trigger('click');
    });
});

使用上面的代码,我只能做我想做的一半。所以,尝试了以下,没有工作。

$(document).ready(function () {
    $("#bigbutton").click(function () {
        $(this).css("background-color", "red");
    });
    $(".div1").mouseenter(function () {
        $("#bigbutton").on('click');
    });
    $("button").click(function () {
        $("#bigbutton").off('click');
    });
});

PS。我对格式错误感到非常抱歉,因为我的 phone 屏幕坏了。

是这样的吗?

  $(document).ready(function () {
    $("#bigbutton").click(function () {
        $(this).css("background-color", "red");
    });
    $(".div1").mouseover(function () {
       $("#bigbutton").trigger('click');
    });
    $("#button1").click(function () {
      $("#bigbutton").off('mouseover').css("background-color", "");
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="div1">
        <button id="bigbutton">bigbutton</button>
        <button type="button" id="button1">button1</button>
        <buttton type="button" id="button2">button2</button>
        </div>