Javascript鼠标悬停，不透明度更改

在我进入这个话题之前，我确信我的问题已经有了答案。我是一个新的编码，所以我不知道如何插入信息，使其在我的网站上工作。我正在尝试获得一个类似此网站的投资组合：。这是我的网站，您可以查看代码：。我试了一个小时都没有成功。请帮忙

最好使用本机css来实现这一点。只需使用

：hover

按钮{背景：蓝色；}
按钮：悬停{不透明度：0.5；}

---

在悬停时更改Opactiy

这不需要javascript。 使用css可以完成以下简单操作：

img:hover {
    opacity: 0.5;
}

如果希望它更平滑，可以添加过渡。这也是通过css实现的。只有在你真正需要的时候才使用javascript

img {
    opacity: 1;
}
img:hover {
    opacity: 0.5;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

---

我猜您正在寻找与第一个站点相同的功能？如果这是正确的，这将为您做到这一点。参见小提琴：

html

---

这是正确的，但是它没有回答这个问题，这是一个XY问题，我正试图用我掌握的信息来解决这个问题。如果我得到关于这个问题的新信息，我可以修改它。看标题。我认为它回答了这个问题，对吗？给出了所提供链接的示例，OP并不是要改变不透明度，而是要在悬停上覆盖一个具有不透明度的深色。这就是为什么我认为这是一个XY问题。我明白了，我认为问题的标题应该更清楚。您可以理解为什么一些用户可能不理解问题标题，并认为这是关于不透明度的。感谢你指出这一点，尽管这只是一个评论，也是我没有否决投票的原因，但这是一个不明确的问题。欢迎来到这里。提供服务将使我们能够更好地帮助您。

<div id="box">

  <div id="overlay">
    <span id="text">Boss Dog Brewing Co.</span>
  </div>

</div>

#box {
  width: 300px;
  height: 200px;
  box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  margin: 5% auto 0 auto;
  background: url(http://s3.gomedia.us/wp-content/uploads/2015/03/GO_BossDogBrewery-1-e1430266175600-300x300.jpg);
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;
}

#overlay {
  background: rgba(0, 0, 0, .75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  width: 300px;
  height: 200px;
}

#box:hover #overlay {
  opacity: 1;
}

#text {
  font-family: Helvetica;
  font-weight: 900;
  color: rgba(255, 255, 255, .85);
  font-size: 16px;
}