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

JavaScript

Caesar Bell
Caesar Bell
24,877 Points
Posted by Caesar Bell
Caesar Bell
24,877 Points

Hover over a div and make another div appear

I am looking to hover over a shirt and make a buy now button appear over it using jquery. Can someone steer me in the right direction? here i my html and css and my jquery (I am stuck on the jquery code) Html <section class="gallery-for-shirts group"> <div> <a href="img/white-shirt.png"><img src="img/white-shirt.png"></a> <div class="btn_overlay" id="shirt_one"><button>Buy now</button></div> </div> <div> <a href="img/white-shirt.png"><img src="img/white-shirt.png"></a> <div class="btn_overlay" id="shirt_two"><button>Buy now</button></div> </div> <div> <a href="img/white-shirt.png"><img src="img/white-shirt.png"></a> <div class="btn_overlay" id="shirt_three"><button>Buy now</button></div> </div> </section> Jquery $('.gallery-for-shirts a').click(function(event){ event.preventDefault(); });

$('.gallery-for-shirts a').hover(function(){

}, function(){

}); css

shirt_one{

position: absolute;
top: 135px;
left: 13%;

}

shirt_two{

position: absolute;
top: 139px;
left: 46%;

}

shirt_three{

position: absolute;
top: 143px;
left: 79%;

}

ducarmont
ducarmont
30,575 Points

it might be easier to help if you made a fiddle/codepen - the formatting above is kinda hard to read. I've done this with js before, but more recently ive been using css transitions. here is a link to an example I made for you of a css version: https://jsfiddle.net/f5L7b53r/

there are 2 shown, but there are many ways to accomplish this.