Question

在我开始讨论之前，我确信我的问题有答案。我是编码的新手，因此我不了解如何插入信息以使其在我的网站上运行。我想获得像这个网站的投资组合：http://gomedia.com/our-work/。这是我的网站，因此您可以看到代码：http://www.mattsusla.graphics。我试了一个小时没有成功。请帮助！

Answer 1

最好用本机css执行此操作。只需使用:hover

调用元素的悬停状态

button { background: blue; }
button:hover { opacity: 0.5; }

<button>Change Opactiy on Hover</button>

让我们看一下您在JavaScript中需要的代码

var button = document.getElementById("my-button");

button.addEventListener("mouseover", function() {
    button.style.opacity = 0.5;
});

button.addEventListener("mouesout", function() {
    button.style.opacity = 1.0;
});

Answer 2

你不需要javascript。用css简单完成：

img:hover {
    opacity: 0.5;
}

如果您希望它更流畅，可以添加转换。这也是用css完成的。如果你真的需要它，只能使用javascript！

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

Answer 3

我猜您正在寻找第一个网站中的相同功能？如果这是正确的，这将为你做。请参阅小提琴：https://jsfiddle.net/8sphkqkn/1/

HTML

<div id="box">

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

</div>

CSS

#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;
}

Javascript鼠标悬停，不透明度变化

3 个答案: