javascript - Adding animate.css on hover -

so p tag starts hidden , on hover shows visible. can me use animate.css use slide in effect on p tag when hover?

#div:hover{     position: absolute;     height: 100%;     width: 100%;     background-color: rgba(0,0,0,0.4);     justify-content: center;  }  h2{    margin-top: 150px;    color: #fff;    display: block;  }  p{    visibility: visible;    color: #fff;    padding: 20px;    display: block;  }

<div id="div">    <div class="div">      <h2>header</h2>      <p></p>    </div>  </div>

you can use animation-name of slideinup (predefined in animate.css) on <p> tag like:

#div:hover p {   animation-name: slideinup; // predefined in animate.css } 

you don't need use javascript also. have @ snippet below:

#div {     display: flex;    align-items: center;    justify-content: center;    width: 100vw;    height: 100vh;  }  #div:hover {     background-color: rgba(0,0,0,0.4);  }  #div:hover p {     animation-name: slideinup;  }  h2{    color: #fff;    display: block;  }  p{    visibility: visible;    color: #fff;    padding: 20px;    display: block;  }  body {    margin: 0;  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>    <div id="div" class="animated">     <div class="div">         <h2>header</h2>         <p class="animated">para</p>      </div>  </div>

hope helps!