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>