如何在 Wella.com 上的 div 元素上制作悬停渐变？答案

【问题标题】：How to make hover gradient on a div element like on Wella.com?如何在 Wella.com 上的 div 元素上制作悬停渐变？
【发布时间】：2016-10-03 21:35:03
【问题描述】：

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

我该怎么做？使用 jQuery 或 css 更好吗？我试图使用 Chrome 开发者工具来找出答案，但徒劳无功。请问，有人可以帮我吗？

谢谢

【问题讨论】：

标签： jquery html css hover gradient

【解决方案1】：

编辑： 正如所评论的那样，您想要一个带有渐变效果的背景图像。所以使用 :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>

希望对您有所帮助！干杯

【讨论】：

谢谢，但是如果我在内容类中使用背景图像呢？在这种情况下，悬停效果不起作用。
@dinodino11 哦！我明白了，我已经更新了答案以满足您的要求，但您只需使用 :hover 效果定位一个内部 div。如果我能提供更多帮助，请告诉我。

【解决方案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
}

祝你有美好的一天！

【讨论】：

谢谢你的回答，安德鲁！