CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rushikesh jogle
Rushikesh jogle

Reputation: 591

How to trigger css :hover event on PageLoad

I am developing an application where i want to open a cover on Pageload . Currently it is opening on hover. Also i want to bring out the page from inside to outside after opening the cover.

        <div id="onw" class="envelope">
          <p>From: <span>LOREM</span></p>
          <p>To: <span>IPSUM</span></p> 
      </div>
      <div class="open"></div>
        <div id="onee" class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet</p>
      </div>

CSS is too long to copy here so i have copied my code into Jsfiddle

JSFiddle Example :- http://jsfiddle.net/rushijogle/4vs0r6zx/

If you dont agree with the question plz dont mark as a negative

Thanx in Advance

Upvotes: 2

Views: 1412

Answers (1)

Der Vampyr
Der Vampyr

Reputation: 951

You should remove the :hover state and make the animation with another html-class. E.g. .open.animateIt contains the animation.

In this case you can make something like this: 

jQuery(document).ready(function($) {
  jQuery('.open').addClass('animateIt');
});

further you need some mouseenter/mouseleave events to trigger the animation after the first pageload.

Upvotes: 1

Related Questions