鼠标离开 div 后悬停状态仍然有效

Question

我遇到了一个奇怪的问题，鼠标离开 div 后悬停状态仍然悬停。要查看此悬停在图片上。我试过检查，但我无法弄清楚。

Youtube视频https://youtu.be/PX8psGOTbNM

不适用于 Wordpress：http://sogomarketingagency.com/test-3/

在 CodePen 上运行良好：http://codepen.io/CookieFresh89/pen/emLXEK

我已尝试停用所有插件并恢复为原始主题，但仍然遇到此问题。

代码：

.modal {
  display: block;
  text-align: center;
  width: 185px;
  margin: 0 auto;
}

.modal-about > label {
  background: #07B288;
  border-radius: .3em;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin-left: 0px;
  padding: 0.50em 1.0em;
  -webkit-transition: all 0.55s;
          transition: all 0.55s;
}
.modal-about input {
  position: absolute;
  left: -50px;
  top: 130px;
  z-index: -10;
}
@media (min-width: 43.75em) {
  .modal-about input {
    right: 50px;
  }
}
.modal__overlay {
  background: rgba(255, 255, 255, 0.9);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  z-index: -800;
}
.modal__box {
  padding: 1em .75em;
  position: relative;
  margin: 1em auto;
  max-width: 500px;
  width: 90%;
}
@media (min-height: 37.5em) {
  .modal__box {
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -80%);
        -ms-transform: translate(-50%, -80%);
            transform: translate(-50%, -80%);
  }
}
@media (min-width: 50em) {
  .modal__box {
    padding: 1.75em;
  }
}
.modal__box label {
  background: #07B288;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: inline-block;
  height: 1.5em;
  line-height: 1.5em;
  position: absolute;
  font-size: 30px;
  right: .5em;
  top: .5em;
  width: 1.5em;
}
.modal__box h1 {
  font-size: 50px;
  margin-bottom:0px;
}
.modal__box h2 {
  color: #07B288;
  margin-bottom: 15px;
  margin-top: 10px;
  text-transform: uppercase;
}
.modal__box hr {
  border: 0;
  height: 1px;
  background: #E8E8E8;
}
.modal__box p {
  text-align: left;
}

.modal__overlay {
  opacity: 0;
  overflow: hidden;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

input:checked ~ .modal__overlay {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 800;
}

input:focus + label {
  -webkit-transform: scale(0.97);
      -ms-transform: scale(0.97);
          transform: scale(0.97);
}
.about-name-h1 {
  margin-top: 10px;
}
.about-wrapper {
    width: 185px;
    height: 227px;
    position: relative;
}
.about-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  padding: 40px 0px;
    background: rgba(255, 255, 255, 0.75);
    visibility: hidden;
    opacity: 0;
  text-align: center;
text-transform:uppercase;
}
.about-overlay:hover {
  padding: 70px 0px;
}
.about-wrapper:hover .about-overlay {
    visibility: visible;
    opacity: 1;
}

.about-name, .about-overlay {
-webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.about-name {
    padding: 15px 0px;
    text-align: center;
    border: 1px solid #e8e8e8;
    border-top: 0;
    font-size: 16px;
    background: #ffffff;
    margin:0px;
    width: 183px;
  cursor:pointer;
}
.about-name:hover {
    background: #07B288;
    color: #fff;
}

.avatar-frame {
    border: 2px solid #07B288;
}
.avatar-frame, .avatar-frame img {
    width: 120px;
    height: 120px;
    -webkit-border-radius: 60px;
  margin: 0 auto;
    /* Saf3+, Chrome */
    border-radius: 60px;
    /* Opera 10.5, IE 9 */
    /*-moz-border-radius: 30px;  Disabled for FF1+ */
}

<div class="about-wrapper">
    <img src="http://sogomarketingagency.com/wp-content/uploads/garry-about-president.jpg" alt="polaroid" />
    <div class="about-overlay">
        <h3>Founder</h3>

        <div class="modal-about">
            <input id="modal-about" type="checkbox" name="modal-about" tabindex="1">
            <label for="modal-about">View Profile</label>
            <div class="modal__overlay">
                <div class="modal__box">
                    <label for="modal-about">&#10006;</label>
                    <div class="avatar-frame">
                        <img src="http://sogomarketingagency.com/wp-content/uploads/garry-about-me-president-circle.jpg" alt="">
                    </div>
                    <h1 class="about-name-h1">Garry Howell</h1>

                    <h2>Founder</h2>

                    <hr>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<h4 class="about-name">Garry Howel</h4>

Answer 1

似乎div.modal__overlay 扩展了div.about-wrapper 从而创建了更大的区域来触发:hover。

编辑：正如 CBroe 所提到的，后代触发其祖先的悬停状态。由于div.modal__overlay 是position:fixed，它有效地创建了第二个悬停区域为 但在 div.about-wrapper 之外。

我成功地将visibility 添加到div.modal__overlay 的切换开关中：

.modal__overlay {
  opacity:0;
  visibility:hidden;
  ...
}

input:checked ~ .modal__overlay {
  opacity: 1;
  visibility:visible;
  ...
}

但是，我不确定为什么这有帮助，因为 visibility:hidden 隐藏的元素是 still supposed to affect layout（即占用空间）。所以，如果它用opacity:0 创建一个更大的:hover 区域，它不应该用visibility:hidden 做同样的事情吗？也许有人可以帮助澄清这种行为。

编辑：更多来自 Cbroe 在 cmets 中的见解，如下所示。

---

我在下面构建了一个差异演示。尝试将鼠标悬停在框 #1 的蓝色区域上。然后尝试将鼠标悬停在框 #2 的同一区域上，即 visibility:hidden。

div.container {
  position:relative;
  width: 200px;
  height: 50px;
  border: 1px solid #CCC;
  margin: 0 0 1em 0;
}
div.prop {
  margin-left: 200px;
  width: 200px;
  height: 50px;
  background-color: #0CC;
}
div.prop.invisible {
  visibility: hidden;
}
div.container:hover {
  background-color: #F00;
}

div.container p {
    position:absolute;
    top:0;
    left:0;
}

<div class="container">
  <p>BOX #1</p>
  <div class="prop"></div>
</div>

<div class="container">
  <p>BOX #2</p>
  <div class="prop invisible"></div>
</div>

---

这是我的代码的工作版本：

.modal {
  display: block;
  text-align: center;
  width: 185px;
  margin: 0 auto;
}

.modal-about > label {
  background: #07B288;
  border-radius: .3em;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  margin-left: 0px;
  padding: 0.50em 1.0em;
  -webkit-transition: all 0.55s;
          transition: all 0.55s;
}
.modal-about input {
  position: absolute;
  left: -50px;
  top: 130px;
  z-index: -10;
}
@media (min-width: 43.75em) {
  .modal-about input {
    right: 50px;
  }
}
.modal__overlay {
  background: rgba(255, 255, 255, 0.9);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  z-index: -800;
}
.modal__box {
  padding: 1em .75em;
  position: relative;
  margin: 1em auto;
  max-width: 500px;
  width: 90%;
}
@media (min-height: 37.5em) {
  .modal__box {
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -80%);
        -ms-transform: translate(-50%, -80%);
            transform: translate(-50%, -80%);
  }
}
@media (min-width: 50em) {
  .modal__box {
    padding: 1.75em;
  }
}
.modal__box label {
  background: #07B288;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: inline-block;
  height: 1.5em;
  line-height: 1.5em;
  position: absolute;
  font-size: 30px;
  right: .5em;
  top: .5em;
  width: 1.5em;
}
.modal__box h1 {
  font-size: 50px;
  margin-bottom:0px;
}
.modal__box h2 {
  color: #07B288;
  margin-bottom: 15px;
  margin-top: 10px;
  text-transform: uppercase;
}
.modal__box hr {
  border: 0;
  height: 1px;
  background: #E8E8E8;
}
.modal__box p {
  text-align: left;
}

.modal__overlay {
  opacity:0;
  visibility:hidden;
  overflow: hidden;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

input:checked ~ .modal__overlay {
  opacity: 1;
  visibility:visible;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 800;
}

input:focus + label {
  -webkit-transform: scale(0.97);
      -ms-transform: scale(0.97);
          transform: scale(0.97);
}
.about-name-h1 {
  margin-top: 10px;
}
.about-wrapper {
    width: 185px;
    height: 227px;
    position: relative;
}
.about-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  padding: 40px 0px;
    background: rgba(255, 255, 255, 0.75);
    visibility: hidden;
    opacity: 0;
  text-align: center;
text-transform:uppercase;
}
.about-overlay:hover {
  padding: 70px 0px;
}
.about-wrapper:hover .about-overlay {
    visibility: visible;
    opacity: 1;
}

.about-name, .about-overlay {
-webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.about-name {
    padding: 15px 0px;
    text-align: center;
    border: 1px solid #e8e8e8;
    border-top: 0;
    font-size: 16px;
    background: #ffffff;
    margin:0px;
    width: 183px;
  cursor:pointer;
}
.about-name:hover {
    background: #07B288;
    color: #fff;
}

.avatar-frame {
    border: 2px solid #07B288;
}
.avatar-frame, .avatar-frame img {
    width: 120px;
    height: 120px;
    -webkit-border-radius: 60px;
  margin: 0 auto;
    /* Saf3+, Chrome */
    border-radius: 60px;
    /* Opera 10.5, IE 9 */
    /*-moz-border-radius: 30px;  Disabled for FF1+ */
}

<div class="about-wrapper">
    <img src="http://sogomarketingagency.com/wp-content/uploads/garry-about-president.jpg" alt="polaroid" />
    <div class="about-overlay">
        <h3>Founder</h3>

        <div class="modal-about">
            <input id="modal-about" type="checkbox" name="modal-about" tabindex="1">
            <label for="modal-about">View Profile</label>
            <div class="modal__overlay">
                <div class="modal__box">
                    <label for="modal-about">&#10006;</label>
                    <div class="avatar-frame">
                        <img src="http://sogomarketingagency.com/wp-content/uploads/garry-about-me-president-circle.jpg" alt="">
                    </div>
                    <h1 class="about-name-h1">Garry Howell</h1>

                    <h2>Founder</h2>

                    <hr>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<h4 class="about-name">Garry Howel</h4>