Javascript js上的DOM img上的鼠标不工作

我正在用js创建3个Pict。我想要的是：当我把鼠标放在图片上时，就会出现描述

但只在第一个img工作。如何正确检查鼠标悬停的图片？我会尝试documentID和Name，但它不起作用。 我的代码：

---

如果您的html和span元素中有3个图像用于描述，您可以添加隐藏和可见的类，并在将鼠标悬停在图像上时简单地打开和关闭它们。例如：

<div>
  <img class="image" src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" />
  <span class="hidden">image 1 description</span>
</div>

<div>
  <img class="image" src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" />
  <span class="hidden">image 2 description</span>
</div>

还可以添加您将要添加的CSS样式，以显示和隐藏您的描述

.image {
  height: 200px;
  width: 400px;
}

.hidden {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

以下是一个例子：

---

我认为问题只是一些小的语法错误。最明显的是使用setAttribute来定义单击处理程序，可以在元素上使用.onclick，也可以使用addEventListener方法，onmouseover和onmouseout都是小写

以下是代码的更新：

// Mage
var imgM = document.createElement ('img');
imgM.src = 'http://3runbrothers.ru/im/mage.png';
imgM.id = 'imgMage';
imgM.name = 'imgMage';
imgM.onclick = function(){imgClick()};
imgM.onmouseover = function(){imgOver()};
imgM.onmouseout = function(){imgOut()};

---

谢谢你的帮助，非常有用。但我只想用JavaScript来实现这一点。我创建了一个迷你游戏。我有3个总是空的DIV。在DIV中我创建了一些东西。第一组-3个img。当我点击img时，该DIV中的所有对象都会被擦除，并显示另一个类似quest with choice的东西。3个按钮，带有进一步操作的选项。也许你知道我在哪里读过如何做这些事？教程？你想给出一个关于JSFIDLE或CodePen的代码示例吗？我可以用它来解决这个问题。非常感谢！现在我知道它们可以像imgM.onclick一样声明

.image {
  height: 200px;
  width: 400px;
}

.hidden {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

// Mage
var imgM = document.createElement ('img');
imgM.src = 'http://3runbrothers.ru/im/mage.png';
imgM.id = 'imgMage';
imgM.name = 'imgMage';
imgM.onclick = function(){imgClick()};
imgM.onmouseover = function(){imgOver()};
imgM.onmouseout = function(){imgOut()};