html - 鼠标离开 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，它有效地创建了第二个悬停区域 for 但在 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 在下面的评论中提供了更多见解。

---

我在下面构建了一个差异演示。尝试将鼠标悬停在框 #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>