jquery - 如何像在 Wella.com 上那样在 div 元素上制作悬停渐变？

Question

我需要在 div 元素上制作渐变悬停效果(示例:http://www.wella.com/professional/en-UK/home)

我该怎么做？使用 jQuery 还是 css 更好？我试图使用 Chrome 开发人员工具来查找，但没有成功。拜托，有人可以帮我吗？

谢谢

Answer 1

编辑:如评论所述，您想要一个顶部带有渐变效果的 bg-image。所以使用 :hover 你实际上可以定位到不同的类，所以它会像这样:

检查 updated fiddle

更新的 CSS:

.hoverable {
  width: 80%;
  height: 50vh;
  background-image: url('http://media.wella.com/professional/m/_master/homepage/Home%20Gallery%20Item/for-all-latest-news_d.jpg');
  background-size: contain;
}

.hoverable:hover .content {
  background: linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%);
}

---

CSS 可能是您的最佳选择，您可以在您的 css 上捕获 :hover 事件以在您想要的 div 上应用所需的渐变。

检查 this Fiddle了解更多信息，但它是这样的:

.hoverable {
  width: 80%;
  height: 50vh;
}
.hoverable:hover {
  background: -webkit-linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%);
  background: -moz-linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%);
  background: -o-linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%);
  background: linear-gradient(rgba(200, 0, 60, 0) 0%, rgba(200, 0, 60, 0.5) 100%);
}
.content {
  width: 100%;
  height: 100%;
  color: black;
}

<div class="hoverable">

  <div class="content">
    Really nice in here
  </div>
</div>

希望对您有所帮助! 干杯