将鼠标悬停在图像上以显示使用JavaScript的文本框仅对一个图像有效，因为I'；我正在使用getElementById

当您将鼠标悬停在图像上时，我使用javascript代码创建一个弹出框，但它只对一个图像有效，因为我相信它使用的是ID而不是类，不过我不确定。 看看我写的代码：

Javascript

var e = document.getElementById('parent');
e.onmouseover = function() {
  document.getElementById('popup').style.display = 'inline';
}
e.onmouseout = function() {
  document.getElementById('popup').style.display = 'none';
}

HTML

我相信它不起作用，因为我使用的是ID。我想弄明白的是，如何对多个图像执行完全相同的操作

---

谢谢。

假设您对所有图像使用相同的ID，这正是问题所在。您的ID在文档中必须是唯一的（因此您可以访问整个页面）；getElementById只返回一个实例，因为它假定您遵循标准。如果要将onclick事件分配给多个元素，则需要切换到使用类。

假设所有图像都使用相同的ID，这正是问题所在。您的ID在文档中必须是唯一的（因此您可以访问整个页面）；getElementById只返回一个实例，因为它假定您遵循标准。如果要将onclick事件分配给多个元素，则需要切换到使用类。

如果可以使用jQuery，则在将ID更改为类后，这将处理多个图像

$('.parent').on('mouseover', function(){
    $(this).next('.popup').css('display', 'inline');
});

$('.parent').on('mouseout', function(){
    $(this).next('.popup').css('display', 'none');
});

---

示例：

如果您可以使用jQuery，那么在您将ID更改为类后，它将处理多个图像

$('.parent').on('mouseover', function(){
    $(this).next('.popup').css('display', 'inline');
});

$('.parent').on('mouseout', function(){
    $(this).next('.popup').css('display', 'none');
});

---

示例：

跳过javascript，向img/popup添加一个类，一个包装器，然后像这样做

.wrap{
位置：相对位置；
}
.弹出窗口{
显示：无；
位置：绝对位置；
背景：#000；
不透明度：0.85；
边界半径：5px；
宽度：500px；
身高：382px；
-webkit边界半径：10px；
-moz边界半径：10px；
边缘顶部：-105px；
左边距：40px；
颜色：#1E90FF；
z指数：1；
}
.弹出窗口：之前{
内容：“；
位置：绝对位置；
顶部：60px；
左：-25px；
z指数：2；
边框：实心15px透明；
右边框颜色：黑色；
颜色：#1E90FF；
指针事件：无；
}
图{
z指数：0；
}
.pic：悬停+弹出窗口{
显示：块；
}

苹果公司：
苹果味道很好
柠檬：
柠檬是酸的

跳过javascript，向img/popup添加一个类，一个包装器，然后像这样做

.wrap{
位置：相对位置；
}
.弹出窗口{
显示：无；
位置：绝对位置；
背景：#000；
不透明度：0.85；
边界半径：5px；
宽度：500px；
身高：382px；
-webkit边界半径：10px；
-moz边界半径：10px；
边缘顶部：-105px；
左边距：40px；
颜色：#1E90FF；
z指数：1；
}
.弹出窗口：之前{
内容：“；
位置：绝对位置；
顶部：60px；
左：-25px；
z指数：2；
边框：实心15px透明；
右边框颜色：黑色；
颜色：#1E90FF；
指针事件：无；
}
图{
z指数：0；
}
.pic：悬停+弹出窗口{
显示：块；
}

苹果公司：
苹果味道很好
柠檬：
柠檬是酸的

以下是一个仅适用于js的解决方案：

Array.prototype.forEach.call（document.queryselectoral（“.imgContainer”），函数（e）{
e、 onmouseover=函数（）{
e、 querySelector（'.popup'）.style.display='inline'；
};
e、 onmouseout=函数（）{
e、 querySelector（'.popup'）.style.display='none'；
};
});
.imgContainer.popup{
显示：无；
位置：绝对位置；
背景：#000；
不透明度：0.85；
边界半径：5px；
宽度：500px；
身高：382px；
-webkit边界半径：10px；
-moz边界半径：10px；
边缘顶部：-105px；
左边距：40px；
颜色：#1E90FF；
}
.imgContainer.popup:之前{
内容：“；
位置：绝对位置；
顶部：60px；
左：-25px；
z指数：1；
边框：实心15px透明；
右边框颜色：黑色；
颜色：#1E90FF；
}

苹果公司：
苹果味道很好
苹果公司：
苹果味道很好
以下是一个仅适用于js的解决方案：


Array.prototype.forEach.call（document.queryselectoral（“.imgContainer”），函数（e）{
e、 onmouseover=函数（）{
e、 querySelector（'.popup'）.style.display='inline'；
};
e、 onmouseout=函数（）{
e、 querySelector（'.popup'）.style.display='none'；
};
});
.imgContainer.popup{
显示：无；
位置：绝对位置；
背景：#000；
不透明度：0.85；
边界半径：5px；
宽度：500px；
身高：382px；
-webkit边界半径：10px；
-moz边界半径：10px；
边缘顶部：-105px；
左边距：40px；
颜色：#1E90FF；
}
.imgContainer.popup:之前{
内容：“；
位置：绝对位置；
顶部：60px；
左：-25px；
z指数：1；
边框：实心15px透明；
右边框颜色：黑色；
颜色：#1E90FF；
}

苹果公司：
苹果味道很好
苹果公司：
苹果味道很好
正如其他人所指出的，
id
应该为您想要访问的每个元素保留一个唯一的值<另一方面，code>name
可以用于所有图像，然后可以使用
document.getElementsByName（）

注意：s'，按名称获取元素s

这将返回找到的元素数组。或者，可以使用
document.querySelector（）
和
document.queryselectoral（）
分别返回符合特定选择器的单个元素或元素数组。该选择器可以基于元素类型、类、名称、特定属性的存在性、特定属性的值以及t
$('.parent').on('mouseover', function(){
    $(this).next('.popup').css('display', 'inline');
});

$('.parent').on('mouseout', function(){
    $(this).next('.popup').css('display', 'none');
});