鼠标离开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（即占用空间）。因此，如果它使用:hover创建了更大的opacity:0区域，那么它是否应该与visibility:hidden相同？也许有人可以帮助澄清这种行为。

编辑：Cbroe在下面的评论中提供更多见解。

---

我在下面建立了差异的演示。尝试将鼠标悬停在方框＃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>