As I am new to jquery, does anyone have ideas how to show video player buttons when mouse enters the video container and hide buttons when mouse leaves the container? Only the progress bar should remain on the screen, when mouse leaves. Have tried it with CSS and javascript, but nothing seems to work. I have managed to get to hide/show buttons when mouse is directly at them or leaves, but not when mouse enters the video container.

HTML:

2. <div id="video_container">
3. <video id="video">
4. <source src="video/video_new.mp4" type="video/mp4">
5. <source src="video/video_new.ogg" type="video/ogg">
6. </video>
7. <!-- Video Controls -->
8. <div id="video-controls">
9.     <button type="button" class="button" id="play-pause"><input type="image" src="icons/play-icon.png" alt="play button icon"></button>
10.     <button type="button" class="button" id="mute"><input type="image" src="icons/volume-on-icon.png" alt="volume ON icon"></button>
11.     <button type="button" class="button" id="full-screen"><input type="image" src="icons/fullscreen-icon.png" alt="fullscreen button icon"></button>
12.     <div><span id="currentTime">00:00</span></div><span id="slash">/</span><div id="duration"><span>00:00</span></div>
13.   </div>
14.      <progress id="progress" value="0">
15.          <span id="progress-bar"></span>
16.       </progress>
17.   </div>