javascript - jQuery Trigger mouseenter on a element without actually real mouse entering element - Stack Overflow

admin管理员组

文章数量:1399997

I have a web page with elements that when mouse hover over element, text appears inside the element. I want to generate the "Mouse hover"/"mouseenter" to show the text even without the mouse actually hover over the element. Code for example:

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

I want to generate the "mouseenter" that's triggers the "$( "#hover_to_show_text" ).mouseenter(function() {" in jQuery, and leave to "mouseenter" there for a N seconds.

I tried (separately):

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

Didn't work. Is there a way to do it?

Thanks.

I have a web page with elements that when mouse hover over element, text appears inside the element. I want to generate the "Mouse hover"/"mouseenter" to show the text even without the mouse actually hover over the element. Code for example:

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

I want to generate the "mouseenter" that's triggers the "$( "#hover_to_show_text" ).mouseenter(function() {" in jQuery, and leave to "mouseenter" there for a N seconds.

I tried (separately):

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

Didn't work. Is there a way to do it?

Thanks.

• javascript
• jquery
• css
• mouseenter
• mouseleave

Share Improve this question Follow edited Jul 20, 2015 at 23:51 Sushanth -- 55.8k99 gold badges6969 silver badges107107 bronze badges asked Jul 20, 2015 at 23:41 BenBBenB 2,91733 gold badges3333 silver badges5656 bronze badges 7

• Not sure I fully understand your question. But after putting your code in jsfiddle it seems to trigger mouseover and mouseenter successfully jsfiddle/p694huuk – EmileKumfa Commented Jul 20, 2015 at 23:50
• I dont think you are doing it right your code runs fine....are you sure you have jquery in your project – code Commented Jul 20, 2015 at 23:51
• You have typos in your code above. And $("#hover_to_show_text").trigger("mouseenter"); should work. – epascarello Commented Jul 20, 2015 at 23:53
• @epascarello It dosnt work. For example here in stack overflow when you hover over "users" in menu it will be orange background. But if you will run "$("#nav-users").trigger("mouseenter");" nothing will happen. – BenB Commented Jul 21, 2015 at 0:04
• Because "users" uses CSS psudeo :hover which is not JavaScript event. You are not going to be triggering that. – epascarello Commented Jul 21, 2015 at 0:10

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 4

Should work. The events are triggered almost immediately. So you might not have seen the difference.

Encase the tiggering of mouseleave inside a setTimeout to see the difference.

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

Update

// 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

本文标签：