鼠标悬停.figure元素时caption-mask背景透明度失效问题求助

嗨，我一眼就揪出问题所在了——你把:hover伪类绑定错元素啦！

问题根源 #

你当前写的.figure .caption-mask:hover，只有当鼠标直接悬停在caption-mask遮罩层本身时才会触发透明度变化。但页面里的.caption层（包含标题和按钮）是在caption-mask上方的，当你把鼠标移到标题或按钮上时，实际是悬停在.caption元素上，根本触不到caption-mask的hover事件，这就是为什么不同区域悬停效果不一样。

修复方案 #

把hover事件绑定到父元素.figure上，这样只要鼠标悬停在.figure范围内的任何区域（图片、遮罩、标题、按钮），都会触发子元素caption-mask的样式变化。只需要修改一行CSS选择器：

将原来的：

.figure .caption-mask:hover { background: rgba(0, 0, 0, 0.0); }

替换为：

.figure:hover .caption-mask { background: rgba(0, 0, 0, 0.0); }

完整修正后的CSS代码 #

.figure { position: relative; overflow: hidden; display: inline-block; }
.figure .caption-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: background .5s ease-out; -moz-transition: background .5s ease-out; -o-transition: background .5s ease-out; transition: background .5s ease-out; background: rgba(0, 0, 0, 0.4); }
/* 修改后的hover选择器 */
.figure:hover .caption-mask { background: rgba(0, 0, 0, 0.0); }
.caption { position: absolute; top: 20%; left: 0; width: 100%; }
.caption h3 { margin-bottom: 60px; }
.figure img { -webkit-transition: all 0.5s linear; transition: all 0.5s linear; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
.figure:hover img { overflow: hidden !important; -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1); }

效果验证 #

现在你再悬停整个.figure区域的任何部分，遮罩层都会平滑过渡到完全透明，同时图片的缩放效果也能正常触发，不会再出现“部分区域生效、部分不生效”的问题了。

内容的提问来源于stack exchange，提问作者Mona Coder