Javascript 如何将鼠标悬停事件添加到图像

我正在尝试创建一个鼠标悬停事件，该事件会将我的图像背景变为黑色，同时添加描述链接到另一个网页的文本。但是我在CSS或JavaScript中尝试过的所有东西都不起作用，我会出错，不知道如何解决这个问题

var one=document.getElementById（“one”）；
addEventListner（“鼠标悬停”，链接）；
添加文本列表器（“鼠标输出”，链接）；
函数链接（）{
one.style.backgroundColor=“黑色”；
one.textContent=“我们的游戏”；
one.style.textAlign=“中心”；
one.style.verticalAlign=“中间”；
}
函数链接（）{
1.style.backgroundColor=“”；
1.textContent=“”；
}

这是我的CSS，我认为覆盖选项不起作用
对我为图像设置的网格执行以下操作。但我是
不知道为什么它不起作用。
#龙{
高度：200px；
}
#混乱{
高度：600px；
}
#标志{
高度：150像素；
}
#雷鸣{
高度：600px；
}
#掷骰子{
高度：235px；
}
h1{
颜色：白色；
文本对齐：居中；
填充：32px；
垫底：0px；
}
/*--------------我的图像网格--------------------------*/
* {
框大小：边框框；
}
身体{
保证金：0；
背景色：黑色；
}
.行{
显示：-ms flexbox；
显示器：flex；
柔性包装：包装；
填充：0.4px；
}
.栏目{
-ms-flex:33.33%；
弹性：33.33%；
最大宽度：33.33%；
填充：0.4px；
}
.img列{
边缘顶部：8px；
垂直对齐：中间对齐；
宽度：100%；
}
/*--------------链接覆盖--------------------------*/
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：黑色；
}
.column:悬停.overlay{
不透明度：1；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}

这是我的HTML

您的脚本中有一个输入错误。另外，您要做的是直接编辑元素。如果您试图删除mouseleave上元素的textcontent，您也将丢失原始元素。我建议使用css来实现这一点

<div class="container">
  <img src="https://images.unsplash.com/photo-1529981188441-8a2e6fe30103?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div> 

.container {
  position: relative;
  width: 300px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

你好，世界
.集装箱{
位置：相对位置；
宽度：300px；
}
.形象{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：黑色；
}
.container:悬停。覆盖{
不透明度：1；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}

---

看一看我的例子，然后在下面我修正了你的版本发生了什么

HTMLElement.addEventListener

拼写错误-您将其拼写为

addEventListener

。默认情况下，

标记显示

内联
，因此您可能也需要更改
标记样式。我很高兴您提出了CSS。实际上，我首先尝试了CSS覆盖的代码，当我无法让它工作时，我尝试了JavaScript解决方案，但对我来说也不起作用。这是我正在使用的CSS，我认为覆盖层对我为图像设置的网格不起作用，但我找不到修复CSS的解决方案。/*------图像网格---------------------------*/*{box size:border box；}body{margin:0；背景色：black；}.row{display:-ms-flexbox；display:flex；flex-wrap:wrap；padding:0 4px；}。列{-ms-flex:33.33%；flex:33.33%；最大宽度：33.33%；padding:0 4px；}。列img{margin top:8px；垂直对齐：中间；宽度：100%；}@CalebErickson你能把这篇文章更新到你的主帖子吗？你尝试了什么，为什么没有成功？也许可以为你的问题提供一个密码笔？我更新了主帖子，对不起，我是一个新手。我没有密码笔，但这在我的任务清单上。