angularjs + css - 显示悬停div然后点击悬停按钮将显示另一个div

Question

我有一张图片。 。当悬停图像时，我需要在悬停时显示x按钮（叠加），然后点击x将导致新的div覆盖所有图像（有过渡）（和图像下方），新的div有2个按钮确定并关闭

如果单击取消并且图像上有鼠标（因为悬停）

，叠加层应该再次出现

我使用角度1.6 + es6，mange做悬停而不是第二部分。我想尽可能用css来实现这个目标

我的代码：

<div class="thumbnail">

      <div ng-if="$ctrl.popupEvent === false" class="overlay">
            <div class="icon">
                <span class="fa fa-close" ng-click="$ctrl.popupEvent = true"></span>
            </div>
       </div>


    <div ng-if="$ctrl.popupEvent === true" class="popup-overlay" style="background: red;">
            <div class="icon-container">
                <span class="fa fa-ok" ng-click="$ctrl.ok();"></span>
                <span class="fa fa-close" ng-click="$ctrl.popupEvent = false;"></span>
            </div>
       </div>

</div>

CSS

//image area
.thumbnail {

    position: relative;

    &:hover{
        .overlay{
           position: absolute;
          display: none;
          background: #erere;
          height: 100%;
          opacity: 0.9;
           width: 100%;
        }

    }
}

    .overlay {
        position: absolute;
        display: none;
        background: #erere;
        height: 100%;
        opacity: 0.9;
        width: 100%;
    }