Get id of an element with the same class

Question

I have multiple div boxes with the class printPic which will have their own unique id. On hover in/out, toggle the display of printPicOverlay which is a child of printPic . The way I have it set up now, printPicOverlay for all ids are toggled on hover.

What would be the best way to show/hide printPicOverlay on hover for each individual id?

 $(".printPic").hover(function () { $(".printPicOverlay").toggle(); }, function () { $(".printPicOverlay").toggle(); }); 

 .printPic{ height: 10em; width: 10em; display: inline-block; background: red; position: relative; } .printPicOverlay{ height: 100%; width: 100%; background: rgba(0,0,0,0.4); display: none; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "printPic" id = "1"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "2"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "3"> <div class = "printPicOverlay"></div> </div> 

Answer 1

Just to add another alternative – this is really easy in plain CSS, without any Javascript/JQuery:

 .printPic { height: 10em; width: 10em; display: inline-block; background: red; position: relative; } .printPicOverlay { height: 100%; width: 100%; background: rgba(0,0,0,0.4); display: none; position: absolute; } .printPic:hover .printPicOverlay { display: block; } 

 <div class="printPic" id="1"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="2"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="3"> <div class="printPicOverlay"></div> </div> 

It's also probably a bit more performant – using native browser functionality rather than finding elements via jquery.

Docs on :hover pseudoclass

If you want to animate the overlay appearance, it's possible with a bit of tweaking ( visibility instead of display etc.):

 .printPic { height: 10em; width: 10em; display: inline-block; background: red; position: relative; } .printPicOverlay { height: 100%; width: 100%; background: rgba(0,0,0,0.4); position: absolute; visibility: hidden; opacity: 0; transform: scale(0.8) translate(0, 10%); transition: visibility 0s, opacity 0.5s ease-in, transform 0.3s ease-in; } .printPic:hover .printPicOverlay { transform: scale(1); visibility: visible; opacity: 1; } 

 <div class="printPic" id="1"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="2"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="3"> <div class="printPicOverlay"></div> </div> 

Answer 2

You could use $(this).find() similar to the below.

What jQuery find does, is get all descendants by the specified selector .printPicOverlay and toggle only those matched elements.

Using $(this) will use the context of the currently hovered over element only.

 $(".printPic").hover(function () { $(this).find(".printPicOverlay").toggle(); }, function () { $(this).find(".printPicOverlay").toggle(); }); 

 .printPic{ height: 10em; width: 10em; display: inline-block; background: red; position: relative; } .printPicOverlay{ height: 100%; width: 100%; background: rgba(0,0,0,0.4); display: none; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "printPic" id = "1"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "2"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "3"> <div class = "printPicOverlay"></div> </div> 

Answer 3

Instead use $(this) , with $(this).find() like:

$(this).find(".printPicOverlay").toggle();

Have a look at the snippet below:

 $(".printPic").hover(function () { $(this).find(".printPicOverlay").toggle(); }, function () { $(this).find(".printPicOverlay").toggle(); }); 

 .printPic{ height: 10em; width: 10em; display: inline-block; background: red; position: relative; } .printPicOverlay{ height: 100%; width: 100%; background: rgba(0,0,0,0.4); display: none; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "printPic" id = "1"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "2"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "3"> <div class = "printPicOverlay"></div> </div> 

Hope this helps!

Answer 4

The issue is because you need to use the this keyword to find() the .printPicOverlay element within the hovered .printPic , like this:

 $(".printPic").hover(function() { $(this).find(".printPicOverlay").toggle(); }); 

 .printPic { height: 10em; width: 10em; display: inline-block; background-color: red; position: relative; } .printPicOverlay { height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.4); display: none; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="printPic" id="1"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="2"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="3"> <div class="printPicOverlay"></div> </div> 

However , it would be much better, and more simple to achieve this in CSS alone. There's no need for JS at all:

 .printPic { height: 10em; width: 10em; display: inline-block; background-color: red; position: relative; } .printPicOverlay { height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.4); display: none; position: absolute; } .printPic:hover .printPicOverlay { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="printPic" id="1"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="2"> <div class="printPicOverlay"></div> </div> <div class="printPic" id="3"> <div class="printPicOverlay"></div> </div> 

Answer 5

$('#' + $(this).attr('id') + '> div').toggle(100);// with little animation

Just a different approach; I rather use only CSS by @helb.

While you already over the element ; and with toggling you can achieve your target. with little animation if you wish.

 $(function(){ $(".printPic").hover(function () { $('#' + $(this).attr('id') + '> div').toggle(100); }); }); 

 .printPic{ height: 10em; width: 10em; display: inline-block; background: red; position: relative; } .printPicOverlay{ height: 100%; width: 100%; background: rgba(0,0,0,0.4); display: none; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "printPic" id = "1"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "2"> <div class = "printPicOverlay"></div> </div> <div class = "printPic" id = "3"> <div class = "printPicOverlay"></div> </div>