Javascript Eventlistener On Multiple Objects

I made an EventListener for a few

elements, now i want do change the opacity on a child of this specific element to change if the EventListener is true on this specific

Solution 1:

With event listeners, you can use this to reference the current element. Because the handler will only react when during a mouseover event, you don't need to check it because it will always be true.

function mouseOver() {
  this.querySelector("img").style.opacity = 0.8;
}

Then, if you want to clear the style change on mouseout, just add the same code to your mouseOut function.

function mouseOut() {
  this.querySelector("img").style.opacity = 1;
}

Also, if you are only modifying the style of child elements, you could solve this with just css.

.overlay:hoverimg {
  opacity: .8;
}

Solution 2:

When event is fired you can access the event prameters. It goes to function as n attribute.

One of properties of the event is target - element that fireв event.

functionmouseOver(e) {
  e.target.querySelector('img').style.maxWidth = "20px";
}

Try to console.dir(e.target) and research it.

Solution 3:

I will simply suggest: 1.assign class to all divs you want to have child change opacity let's say myClass

$('.myClass').children().on('mouseenter', function(){
  $(this).css('opacity', '0.8');
 });

Share