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

Question

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

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

谢谢

Answer 1

编辑： 正如您所评论的，您想要一个顶部带有渐变效果的背景图像。所以使用 :hover 你实际上可以定位不同的 class，所以它会像这样：

已更新 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>

希望对您有所帮助！干杯

Answer 2

这是一个很好的问题。首先是理论上的答案，然后是您问题的具体答案。通常您希望在 CSS 中保留设计更改。同时保持 Javascript（jQuery 是一个 javascript 库）专注于功能。

现在更具体地解决悬停效果，我不确定他们在您引用的网站上是如何做到的，但如果您只是切换 div 的渐变叠加层，那么我会建议只使用 :hover CSS 伪选择器。它简单、干净，适用于所有这些浏览器 http://caniuse.com/#feat=css-sel2

你的 CSS 看起来像这样

div:hover {
    background: linear-gradient( ... ); //Add all vendor prefixes
    transition 3s; //Add all vendor prefixes
}

祝你有美好的一天！

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

How to make hover gradient on a div element like on Wella.com?

html

css

jquery

gradient

hover