如何实现这样的悬停效果

Question

我试图在stackover流程中搜索这个效果，但我不知道，开发人员称这种悬停效果也无法实现它。

是否可以使用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>