Question

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

我该怎么办？使用jQuery或css更好吗？我试图使用Chrome开发者工具来查找，但是徒劳无功。拜托，有人可以帮我吗？

由于

Answer 1

编辑：如您所说，您希望在顶部有一个带有渐变效果的bg图像。所以使用：hover你实际上可以定位一个不同的类，所以它会是这样的：

更新了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上捕捉：悬停事件，以便在您想要的div上应用所需的渐变。

检查this Fiddle以获取更多信息，但它是这样的：

＆＃13;

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

＆＃13;

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

＆＃13;

希望它有所帮助！干杯

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元素上悬停渐变？

2 个答案: