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上div时将样式更改为mouseover/mouseout并清空div。我试过这个并且工作但是我不想重复所有：

<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 即可... 您可select使用.class的所有图片类，并使用:hover

在鼠标enter/leave上添加效果

.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

尝试以下方法：

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"/>

关于你的第二个问题：

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>

Answer 3

代码段演示 - Vanilla Javascript：

＆＃13;

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

＆＃13;

.ico {
  transition: .7s;
}

＆＃13;

<img class="ico" src="https://placehold.it/200x200" id="n1">
<img class="ico" src="https://placehold.it/200x200" id="n2">

＆＃13;

代码片段演示 - jQuery：

使用.hover()方法^{Ref: jQuery API}

＆＃13;

$('.ico').hover(function(){
  $(this).css('opacity', '0');
}, function() {
  $(this).css('opacity', '1');
});

＆＃13;

.ico {
  transition: .7s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="ico" src="https://placehold.it/200x200" id="n1">
<img class="ico" src="https://placehold.it/200x200" id="n2">

＆＃13;

addEventListener从一个类

3 个答案: