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');
});
Post a Comment for "Javascript Eventlistener On Multiple Objects"