jQuery 在元素上触发 mouseenter 而实际上没有真正的鼠标进入元素

Question

我有一个包含元素的网页，当鼠标悬停在元素上时，文本会出现在元素内。我想生成 "Mouse hover"/"mouseenter" 来显示文本，即使鼠标实际上没有悬停在元素上也是如此。代码举例：

HTML

<div> 
    <span id="hover_to_show_text">Hover here to show hidden text</span>
    <span id="hidden_text" style="display:none">Hidden text</span>
</div>

JS

$( "#hover_to_show_text" ).mouseenter(function() {
   $( #hidden_text ).show();
});
 $( "#hover_to_show_text" ).mouseleave(function() {
   $( #hidden_text ).hide();
});

我想生成触发 jQuery 中的“$(”#hover_to_show_text”).mouseenter(function() {”的 "mouseenter"，然后留给 "mouseenter" 等了 N 秒。

我试过（分别）：

$("#hover_to_show_text").hover();
$("#hover_to_show_text").trigger('mouseover');
$("#hover_to_show_text").trigger('mouseenter');

没用。有办法吗？

谢谢。

Answer 1

应该可以。这些事件几乎是立即触发的。所以你可能没有看出区别。

将 mouseleave 的跳动包含在 setTimeout 中以查看差异。

$( "#hover_to_show_text" ).mouseenter(function() {
   $('#hidden_text').show();
});
 $( "#hover_to_show_text" ).mouseleave(function() {
   $('#hidden_text').hide();
});

$("#hover_to_show_text").trigger('mouseover');

setTimeout(function() {
    $("#hover_to_show_text").trigger('mouseleave');
}, 1500);

Check Fiddle

更新

// Just triggering the click event will not work if no
// click handler is provided.
// So create one first
$("#btn").on('click', function () {

    // trigger the mouse enter event 
    $("#hover_to_show_text").trigger('mouseenter');

    setTimeout(function () {
        $("#hover_to_show_text").trigger('mouseleave');
    }, 1500);

});

Update Fiddle

jQuery 在元素上触发 mouseenter 而实际上没有真正的鼠标进入元素

jQuery Trigger mouseenter on a element without actually real mouse entering element

javascript

css

jquery

mouseenter

mouseleave