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;
}

user_3776299 · Answer

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;
}

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;
}

user_448144 · Answer

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;
}

user_1687746 · Answer

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;
}

Hope this helps!

user_519413 · Answer

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;
}

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;
}

user_7735285 · Answer

$('#' + $(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;
}

Get id of an element with the same class

5 Answers