javascript - 当鼠标离开浏览器窗口时 Bootstrap 模式消失，不返回

Question

我做了一个快速的 CodePen 来突出这个问题。

https://codepen.io/robbullock/pen/NwWqYE

1) 将鼠标悬停在卡片上 2) 单击“请求访问”按钮 3) 鼠标离开屏幕，模态消失并且不会回来。

我认为导致问题的原因是下面的“.content .content-overlay”类以及相应的悬停效果。

.content .content-overlay {
background: rgba(51, 51, 51, 0.9);
position: absolute;
height: 270px;
width: 270px;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-o-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
border-radius:8px;
}

.content:hover .content-overlay {
opacity: 1;
}

.content:hover .content-details {
top: 50%;
left: 50%;
opacity: 1;
}

有什么办法可以防止这种行为吗？

Answer 1

那是因为您没有关闭 .content-overlay 元素，所以它也包裹了模态元素。因此，当您将鼠标移出页面时，:hover 规则不适用，并且模态框会因为其容器被隐藏而消失。

参见 https://codepen.io/anon/pen/mqdedj