addEventListener 用于更改从一个类中选定的 id 的 CSS 样式

Question

我有很多很多img相同class和适当的id。

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

我想更改例如选定的不img透明度mouseover/mouseout。我尝试了指定的id工作：

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

现在我该如何处理所有图像？我尝试过类似的事情，但结果很糟糕。

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

我也尝试过：

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

和这个..... ：

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

我不明白我必须如何继续。

---

现在我也有很多很多：

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

我想在容器上将样式更改为和为p空。我尝试过并工作，但我不想为所有人重复：divmouseover/mouseoutdiv

<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

只需使用CSS即可...您可以选择所有图像类并使用.class鼠标添加效果enter/leave: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"/>