Reputation: 9720

Execute mouseover() from JS without change position of mouse

I have on div, after mouseover it change here content, how I can to execute mouseover without mouse, it is possible?

my div before mouse over:

<div id="divId" class="some_css_class" style="visibility: visible;">
<div style="visibility: hidden;">
      <p>Test</p>
   </div>
</div>

my div after mouseover:

<div id="divId" class="some_css_class" style="visibility: visible;">
    <div style="visibility: visible;">
          <p>Test</p>
       </div>
    </div>

Upvotes: 1

Answers (6)

Aerious

Reputation: 490

You can simulate events using trigger function, but before you trigger the event you have to specify its function

    $('#divId').on('mouseover', function(){
        $(this).find('>:first-child').css('visibility','visible');
    });
    // Line below triggers the event programmatically on load 
    $('#divId').trigger('mouseover');

Look at this fiddle for more reference http://jsfiddle.net/Aerious/nLf90cyt/

Upvotes: 7

d32

Reputation: 53

You can trigger mouseover event using:

document.getElementById('divId').onmouseover();

Also you need to bind callback function for mouseover event on your div with id='divId' and change div visibility in the callback.

Hope this helps

Upvotes: 0

mrMarshalX

Reputation: 1

You should try to use "native" Javascript without JQuery. You could try this:

var event = new Event('mouseover');
document.querySelector('#divId').dispatchEvent(event);

Give me feedback if it works as you wanted it to work ;)

Upvotes: 0

tomaoq

Reputation: 3056

You can use jQuery's mouseover() but I think simulating events is not the good way to go if you need more than just a css effect (like programmaticaly hide a div).

It would be cleaner to have a function that toggles the div state and call it whenever you want to change the state of the div.

Upvotes: 2