jQuery触发mouseenter在一个元素上没有真正的鼠标输入元素

时间:2015-07-20 23:41:15

标签: javascript jquery css mouseenter mouseleave

我有一个包含元素的网页,当鼠标悬停在元素上时,文本会出现在元素内部。 我想生成“鼠标悬停”/“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();
});

我想生成“mouseenter”,它触发“$(”#hover_to_show_text“).mouseenter(函数(){”在jQuery中,并在那里留下“mouseenter”N秒。

我试过(单独):

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

没用。有办法吗?

感谢。

1 个答案:

答案 0 :(得分:3)

应该有效。事件几乎立即触发。所以你可能没有看到差异。

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