jquery - 如何实现这样的悬停效果

Question

我试图在stackover flow中搜索这种效果，但我没有头绪，开发人员所谓的这种悬停效果也没有实现它的想法。

是否可以使用 CSS 实现此目的，如果不能，我可以使用 jQuery 来解决吗？

谢谢。

Answer 1

你会想做这样的事情

<style type="text/css">
 .thumb {position:relative;width:200px;height:20px;}
.thumb:hover .overlay {opacity:0.5;}
.overlay {position:absolute;top:0;left:0;width:200px;height:20px;background:#fff;opacity:0;}
</style>

<div class="thumb">
  <div class="overlay"></div>
  <img src="image.gif" />
</div>