Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points
Posted by Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Can elements move on hover?

Hello,

I am wondering what to use for this problem. When my container is on hover I want my video progress bar to move upwards about 20px. However I can not get it to work using :hover. A media query wouldn't work in this situation, does anyone know of how to move an element in this situation?

```     #seekBar {
position: absolute;
bottom: 40%;
left: 27%;
width: 620px;
height: 3px;
}


/*-----Icons Hover Styling.  Icons to show when video is hovered on------ */ 

#hover_container {
display:block;
margin:auto;
width: 620px;

}

.tag {
opacity: 0;
}

 #hover_container:hover .tag{
opacity: 1;
}

#hover_container:hover #seekBar{
   bottom: 45%;
}  // this code is not working??  Need a better approach. ```

1 Answer

Nicholas Vogel
Nicholas Vogel
12,318 Points
Nicholas Vogel
Nicholas Vogel
12,318 Points

You could try doing this using jQuery. It might be possible with plain JavaScript, but the jQuery might look something like this (you'll need to add the library).

<head>
<script src="jquery-3.1.1.min.js"></script>
</head>

You'll need an opening and closing script HTML tag for the jQuery below to work. <script>

$document.ready(function) {
     $("#hover_container").mouseenter(function(){
          $("seekBar").animate({bottom: '45%', "slow"}); //animates bar to move 45% away from bottom slowly
     })
     $("#hover_container").mouseleave(function(){
          $("seekBar").animate({bottom: '0', "slow"}); //brings bar back to normal
     });
});

</script>