如何在页面加载上触发css:hover事件

时间:2014-11-19 12:19:41

标签: javascript jquery html css3

我正在开发一个应用程序,我想在Pageload上打开一个封面。目前正在悬停开放。此外,我想在打开封面后从内到外将页面显示出来。

        <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太长了,无法复制到此处,所以我将我的代码复制到了Jsfiddle

JSFiddle示例: - http://jsfiddle.net/rushijogle/4vs0r6zx/

如果你不同意这个问题,请不要将其标记为否定

Thanx提前

1 个答案:

答案 0 :(得分:1)

您应该删除:hover状态并使用其他html类制作动画。例如。 .open.animateIt包含动画。

在这种情况下,你可以做这样的事情:

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

你需要一些mouseenter / mouseleave事件来在第一次页面加载后触发动画。