javascript eventlistener on multiple objects

Question

I made an EventListener for a few <div> 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 element. How do I write that with jQuery or Javascript? I already wrote the pseudoquote, which I think should work. I have a problem to translate it to js.

var overLay = document.getElementsByClassName("overlay");

for (i = 0; i < overLay.length; i++) {
  overLay[i].addEventListener("mouseover", mouseOver);
  overLay[i].addEventListener("mouseout", mouseOut);
}

function mouseOver() {
  document.getElementById("project_07").style.maxWidth = "20px"; //just for testing works!
  /* PSEUDOCODE
  if overlay[i] (mouseover === true) {
    getChildElement of (this/ overlay[i]) // is an <img> element
    and .style.opacity = ".8";
  */
}

function mouseOut() {
  document.getElementById("project_07").style.maxWidth = "100%";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Are you just changing styles with mousein/out? If so, css alone will suffice, no need for javascript. — A. L, May 18 '17 at 01:47
Project 09
I want to change the opacity of the ´img´ if the ´div´ with the class overlay is hovered. how to I write that in css? — SurfinBird, May 18 '17 at 02:04
You can use adjacent sibling combinator + per [this link](http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling) — Treefish Zhang, May 18 '17 at 02:14

Will Reese · Accepted Answer · 2017-05-18T01:47:13.473

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:hover img {
  opacity: .8;
}

edited May 18 '17 at 01:47

answered May 18 '17 at 01:35

Will Reese

2,801
2
15
27

wouldn't css `hover` suffice for this? – A. L May 18 '17 at 01:37
Thats a good point. I just assumed he would add other code, but if its only the one style change then js is unnecessary. – Will Reese May 18 '17 at 01:46
1

I'm assuming he's new and doesn't know that instead :) – A. L May 18 '17 at 01:46
No, because I can't choose the nextSibling in CSS?! I have an ´´ covered with an ´
´ (in the div is text), if i ´hover´ the ´div´i want to change the opacity of the . is there a way in css?
– SurfinBird May 18 '17 at 01:52
I'm not sure what you mean by that, but there is a sibling selector. Maybe something like `.overlay:hover + div img` would work. – Will Reese May 18 '17 at 01:54
I basicly want to change the opacity of the ´img´ if the ´div´ with the class ´overlay´ is hovered
Project 09
– SurfinBird May 18 '17 at 01:58
@Will Reese: If the dom is like '
Project 09
', then 'this.querySelector("img")' would not work because 'img' is not [descendant](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector) of overlay, rather, sibling, would it? – Treefish Zhang May 18 '17 at 02:25
1

@Treefish Zhang In this case, no. Instead you could do something like: `this.parentNode.querySelector("img")` – Will Reese May 18 '17 at 02:29
1

Thanks to all! Yes, i tried it instead of ´querySelecter' with ´nextElementSibling´ so it worked. But i got it now with CSS, totally overseen this. – SurfinBird May 18 '17 at 02:35

score 0 · Answer 2 · answered May 18 '17 at 01:37

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.

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

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

score 0 · Answer 3 · answered May 18 '17 at 01:40

0

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

answered May 18 '17 at 01:40

Oleg Markoff

321
2
7

javascript eventlistener on multiple objects

3 Answers3

Linked

Related