当鼠标离开浏览器窗口时，引导模式消失，不返回

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

Answer 2

将

模态移出

标记

<li class="col-md-4 content allAvail">
  <div class="card">
    <div class="card-block">
      <p class="card-title-none">Title</p>
      <p class="card-type">text</p>
    </div>
  </div>
  <div class="content-overlay">
    <div class="card-content content-details-noaccess fadeIn">
      <div class="about">About</div>
      <div class="description">text and some stuff</div>
      <button type="button" class="button primary-request" data-toggle="modal" data-target="#myModal">Request Access</button>
      <a href="/">
        <button class="button secondary-btn-noaccess">View Details</button>
      </a>
    </div>

    <!-- CC MODAL ACCESS -->
  </div>
</li>
<!-- END MODAL -->
<div id="myModal" class="modal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>