jQuery：如何触发鼠标移出事件？

Question

如何触发第二个hover函数？

$('#adm1n-toolbar').hover(
    function() {
        ...
    },
    function() {
        ...
    }
);

$('#adm1n-toolbar-content select').change(function(e) {
    ...
    $('#adm1n-toolbar').trigger('mouseout');
});

mouseout或mouseleave不起作用。

- Alex G

Answer 1

如果你使用mouseleave，它会正常工作，这就是hover在幕后使用的方法。

演示：

$('#adm1n-toolbar').hover(
  function() {
    console.log('in');
  },
  function(e) {
    $(this).fadeOut('fast').fadeIn('fast');
  }
);

$('#adm1n-toolbar-content select').change(function(e) {
  $('#adm1n-toolbar').trigger('mouseleave');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="adm1n-toolbar">toolbar</div>

<div id="adm1n-toolbar-content">
  <select multiple>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option>option 4</option>
  </select>
</div>

- Gabriele Petrioli

---

@Radio，很可能...如果你已经将其实时发布在某个地方，请发布链接，以便我们可以看到它的运行情况。 - Gabriele Petrioli

Answer 2

你无法直接对hover()中的第二个函数进行操作。但是，由于hover()只是mouseenter()和mouseleave()的快捷方式，您可以单独为它们分配并触发它们。尝试这样做：

$('#adm1n-toolbar')
    .mouseenter(function() {
        // ...
    })
    .mouseleave(function() {
        // ...
    });

$('#adm1n-toolbar-content select').change(function(e) {
    $('#adm1n-toolbar').trigger('mouseleave');
});

- Rory McCrossan

---

是的...只需要删去最后的额外 )。 - Alex G

@RoryMcCrossan：但是留下分号 =) - Alex G

@GabyakaG.Petrioli 是正确的。您可以使用 hover() 并仍然触发 mouseleave。您不必显式设置 mouseenter 和 mouseleave 事件。 - iheartcsharp