addEventListener to change CSS style for selected id from one class

Question

I have many many img with the same class and proper id.

<img class="ico" id="n1"></img>
<img class="ico" id="n2"></img>

I want to change for example opacity of selected img when mouseover/mouseout. I tried with a specified id and work:

var x = document.getElementById("n1");
x.addEventListener("mouseover", function(){ 
    mOverImg(document.getElementById("n1")); });
x.addEventListener("mouseout", function(){ mOutImg(document.getElementById("n1")); });

function mOverImg(img) {
    img.style.opacity="0";
}

function mOutImg(img) {
    img.style.opacity="1";
}

Now how I can do with all images? I tried anything like this but with bad result.

var icone = document.getElementsByClassName("ico");
for (var i=0; i<icone.length; i++){           
    icone[i].addEventListener("mouseover", mOverImg);
    icone[i].addEventListener("mouseout", mOutImg);
}
function mOverImg(e) {                
    e.target.querySelector("img").style.opacity="1";                
}

I tried also with:

var icone = document.getElementsByClassName("icone");
for (var i=0; i<icone.length; i++){
    var x = document.getElementById(icone[i].getAttribute('id') );
    x.addEventListener("mouseover", function(){ mOverImg(x)} );
    x.addEventListener("mouseout", function(){ mOoutImg(x)} );
}

and this..... :

 $(".icone").children().on("mouseover", function(){
     $(this).css("opacity", "1");
 });

I can't understand how I have to proceed.

---

Also now I have many many:

<div class="container">
    <p>Paragraph</p>
    <div>Empty</div>
</div>

I want to change style to p and to empty div when mouseover/mouseout on container div. I tried this and work but I don't want to repeat for all:

<div class="container" onmouseover="mOver(b1, p1)" onmouseout="mOut(b1, p1)">
    <p id="p1">Paragraph</p>
    <div id="b1"></div>
</div>

function mOver(obj, p) {
    obj.style.borderColor="white";
    p.style.color="white";
}

function mOut(obj, p) {
   obj.style.borderColor="green";
   p.style.color="#399AF6";
}

Answer 1

Just use CSS for this... You can select all image classes with .class and add effect on mouse enter/leave with :hover

.img{
transition:all 0.5s;
width:100px;
}

.img:hover{
opacity:0.2;
}

<img src="https://www.w3schools.com/html/pulpitrock.jpg" class="img" id="1"/>
<img src="https://www.w3schools.com/html/pulpitrock.jpg" class="img" id="2"/>
<img src="https://www.w3schools.com/html/pulpitrock.jpg" class="img" id="3"/>
<img src="https://www.w3schools.com/html/pulpitrock.jpg" class="img" id="4"/>

Answer 2

Try the following:

var x = document.querySelectorAll(".ico");
x.forEach(function(img){
  img.addEventListener("mouseover", function(){ mOverImg(img) });
  img.addEventListener("mouseout", function(){ mOutImg(img) });
});

function mOverImg(img) {
  img.style.opacity="0";
}

function mOutImg(img) {
  img.style.opacity="1";
}

<img class="ico" id="n1" alt="one"/>
<img class="ico" id="n2" alt="two"/>

As to you second query:

function mOver(thatElement) {
  thatElement.querySelector('#p1').style.color="white";
  thatElement.querySelector('#b1').style.color="white";
}

function mOut(thatElement) {
  thatElement.querySelector('#p1').style.color="green";
  thatElement.querySelector('#b1').style.color="green";
}

<div class="container" onmouseover="mOver(this)" onmouseout="mOut(this)">
    <p id="p1">Paragraph</p>
    <div id="b1">Empty</div>
</div>