javascript - Fading in an object when hovering over another one -

i'd slide down tooltip element when hovering on element.

i tried using jquery, i'm experiencing nothing faded in if hover on countbox1. countbox1 timer made javascript.

i don't think script wrong. think doesn't detect jquery reason.

i tried download jquery , put in "src:" directly.

$(document).ready(function(){    $("#countbox1").onmouseover(function(){      $("#tooltip").fadein();    });    $("#countbox1").onmouseout(function(){      $("#tooltip").fadeout();    });  });

#countbox1 {    width: 400px;    margin-left: auto;    margin-right: auto;    text-align: center;    font-family: bebas;    font-size: 70px;    color: white;    cursor: default;  }    #tooltip {    width: 500px;    margin-left: auto;    margin-right: auto;    color: white;    font-family: mix_thin;    font-size: 18px;    text-align: center;    margin-bottom: -5px;    display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  <div id="home">    <p id="tooltip">wochen:tage:stunden:minuten:sekunden</p>    <div id="countbox1"></div>    <hr style="width: 500px;">  </div>

if want tooltip enter screen on hover of else, i'd suggest using css transition.

if nest <p id="tooltip"> within #countbox1 , put :hover-event on that, can thing want.

html

<div id=home>     <div id="countbox1">         <p id="tooltip">wochen:tage:stunden:minuten:sekunden</p>     </div>     <hr style="width: 500px;"> </div> 

css

#home {     height: 50%;     background: red; }  #countbox1 {     width: 400px;     margin-left: auto;     margin-right: auto;     text-align: center;     font-family: bebas;     font-size: 70px;     color: white;     cursor: default;     height: 50px;     background: #f4f4f4; }  #countbox1:hover #tooltip {     opacity: 1;  }  #tooltip {     width: 500px;     color: white;     font-family: mix_thin;     font-size: 18px;     text-align: center;     height: 30px;     background: #0000ff;     position: absolute;     left: 50%;     margin-left: -250px;     top: -15px;     opacity: 0;     transition: 1s; } 

here's working demo. hover on grey area tooltip enter view.

here's working demo tooltip enters screen top.