jQuery-触发div上的mouseenter的单击，如果单击任何其他按钮，则取消单击

Question

I want to trigger a click on "bigbutton" when hovering over a div, "div1". And if I click on any other button, the "bigbutton" needs to be unclicked and the click need to move the newly clicked button. Here's what I've tried:

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');
    });
});

With the above code, I'm only able to do half of what I want. So, tried the following, did not work.

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

PS. I'm extremely sorry about the formating errors as my phone has a broken screen.

Answer 1

Something like this?

  $(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>