得到双倍；onmouseover“；Javascript

首先，你可以看看这两张图片，这样你就明白了

不悬停时： 悬停时：

现在，当我将鼠标放在一个图像上时，两个图像获取按钮都可以。 但我只希望每个图像都有自己的按钮，在鼠标上方，另一个图像隐藏按钮

我真的不知道如何修复它，而且我是Javascript的初学者

这是我的HTML/CSS/Javascript代码

var buttonNew=document.getElementsByClassName（'buttonNewest'）；
var buttonRan=document.getElementsByClassName（'buttonRandom'）；
函数imageOver（）{
对于（变量i=0；i

.charSelect[role=“Background”]{
宽度：1600px；
最小高度：600px；
保证金：25像素自动；
}
.charSelect[role=“Background”]>h1{
宽度：300px；
保证金：0自动；
边框：虚线2pxRGBA（255,207,0,0.75）；
文本对齐：居中；
文本转换：大写；
字号：2.6em；
文本阴影：2px2p3pRGB（0,0,0）；
}
.charSelect[role=“Characters”]{
位置：相对位置；
显示：内联块；
宽度：250px；
高度：自动；
背景：rgba（42,42,42,0.7）；
边框：虚线2pxRGBA（255,207,0,0.4）；
颜色：rgba（255，207，0，1）；
不透明度：0.6；
-webkit转换：不透明度1s；
左边距：250像素；
}
.charSelect[role=“Characters”]：悬停{
不透明度：1；
转换：标度（1.05）；
}
.charSelect[role=“name”]{
宽度：100%；
字号：1.8em；
}
.charSelect[role=“Names”]>p{
边距：0！重要；
文本对齐：居中；
文本转换：大写；
文本阴影：1px1px2pRGB（0,0,0）；
}
/*钮扣*/
.charSelect[role=“LatestVid”]，.charSelect[role=“RandomVid”]{
宽度：170px；
高度：45px；
背景：-webkit线性梯度（顶部，rgb（255，207，0），rgba（255，207，0，0））；
文本对齐：居中；
线高：45px；
颜色：黑色；
-webkit转换：背景1s；
过渡：背景1s；
盒影：0px 0px 3px；
}
.charSelect[role=“LatestVid”]{
显示：无；
位置：绝对位置；
最高：50%；
右：70%；
}
.charSelect[role=“RandomVid”]{
显示：无；
位置：绝对位置；
最高：50%；
左：70%；
}
.charSelect[role=“RandomVid”]：悬停，.charSelect[role=“LatestVid”]：悬停{
背景：rgb（255207,0）；
}
/*动画*/
@-webkit关键帧移动按钮左{
0% {
左：50%；
}
100% {
左：70%；
}
}
@-webkit关键帧MoveButtonRight{
0% {
右：50%；
}
100% {
右：70%；
}
}

德克尔

德克尔

问题在于您没有参照光标所在的当前对象。如果您使用光标覆盖和图像，您的函数将对页面上可以找到的所有

按钮new

和

按钮ran

应用这些更改。

您正在调用一个

imageOver（）

循环所有元素

我不使用JS，而是使用纯CSS：

*{font:14px/1无衬线；}
.charSelect{
位置：相对位置；
显示：内联块；
垂直对齐：顶部；
}
.查巴顿{
位置：绝对位置；
底部：40px；
宽度：100%；
文本对齐：居中；
不透明度：0；
可见性：隐藏；
过渡：0.4s；
-webkit转换：0.4s；
}
查拉先生{
显示：块；
页边顶部：1px；
文本对齐：居中；
颜色：#fff；
背景：#444；
填充：10px；
不透明度：0.9；
过渡：0.3s；
-webkit转换：0.3s；
}
.charButtons a:悬停{不透明度：1；}
.charSelect:悬停.charButtons{
能见度：可见；
不透明度：1；
}

英雄1
英雄2

我不知道你为什么使用JS。。。如果我很好地阅读了你的问题，这一切都可以通过CSS单独完成。尝试学习类似knockout js或angularjs的库来实现这类功能，因为在将来，它们会很有用。谢谢dpaul，我正在学习Javascript，所以谢谢你的回答！谢谢你的回答！