css - 悬停时显示带有动画按钮的 div

Question

有点难以用语言描述，所以我将从一个例子开始: http://www.hairstylesdesign.com/

我可以实现类似的效果，当我将它的值设置为 0% 不透明度到 100% 不透明度时，会出现深色背景。例子:.blackscreen { 背景:黑色；不透明度:0%； }.blackscreen:hover {不透明度: 100%;}

但问题在于嵌套在其中的 div。例如:

<div class="picture">
<div class="blackscreen">
<div class="buttons">
</div>
</div>
</div>

通过使父 div 的不透明度等于 0，它不会影响嵌套在其中的 div。我想知道这个人是如何成功实现这种效果的。

非常感谢您的帮助。

Answer 1

不透明度不是以百分比表示的从 0% 到 100% 的值，它是从 0 到 1 的分数。

而且它是 children 无法覆盖的稀有属性之一。如果父项的不透明度为 0，则子项的不透明度应始终为 0。