css - 将鼠标悬停在 div 上以显示隐藏的 div - 保持事件状态超过父级高度

Question

我正在寻找实现一些简单但挂断它的方法。这是我想要做的事情的粗略副本:http://codepen.io/anon/pen/LGZaPr

我的 col-4 parent 的 Sass:

      .col-4 {
          background: $primary-color;
          color: $heading-two;
          font-family: $secondary-font;
          text-align: center;
          height: 201px;
          padding: rem-calc(32px 0);
          overflow: visible;
}

介绍内容之前的更多信息内容:

  .more-info {
  @media #{$xlarge-breakpoint} {
      width: calc-percent(70px, $site-width);
  }
    position:absolute;
    width: calc-percent(123px, $site-width);
    height: 201px;
    background: $base-color;
    overflow: hidden;
    z-index: 9999;
    visibility: hidden;
    font-family: $primary-font;
    padding: rem-calc(10px);
    color: $primary-color;
    text-align: left;
    @include transition(bottom, 0.3s, ease-in-out);
    line-height: 1.3;
    @media #{$medium-breakpoint} {
        width: 22.115%;
    }
    &:active {
        display: block;
    }
    &:hover {
        display: block;
    }
    a {
      text-transform: uppercase;
      font-family: $secondary-font;
      text-decoration: none;
      color: $primary-color;
      &:hover {
          color: $heading-two;
      }
    }
  } // .more-info

我的悬停 Sass 看起来像:

  .intro-content {
      //height: 100%;
      &:hover + .more-info {
          opacity: 1.0;
          display: block;
          visibility: visible;
          position: relative;
          z-index: 100000;
      }
  }

我想将鼠标悬停在 .intro-content 上以显示 .more-info 中的内容。我希望能够将更多信息 div 保持打开状态，直到我将光标移开，以便任何人都可以单击框中的链接/突出显示任何文本。

感谢任何帮助，谢谢!

Answer 1

好吧，您可以为此使用一些 javascript。像这样的..

我编辑了您的一些 CSS。只需将 js 脚本复制并粘贴到您的代码中，它就会开始工作。我还编辑了你的 CSS 并给了你它的编译版本。可以找到它的 Scss 版本 here

编辑

检查您的网站后，我发现您的 wrapper 类已将溢出设置为隐藏，这会阻止您的弹出窗口完整显示。

我唯一能找到的解决办法就是禁用它。禁用它后，您可以看到整个框 more-info。 (或将其设置为可见)

.wrapper {
margin: 0 auto;
width: 940px;
overflow: visible;
}

还有这到您的更多信息悬停部分。

#services-menu .col-4 .more-info:hover {
display: block;
position: relative; /*NEW */
}

position relative 会防止弹出框溢出。

接下来是您的媒体查询。

您已根据网页的视口(viewport)设置了宽度。不应该是这样的。。您应该将其设置为 width: 100% of col-4 然后它可以基于视口(viewport)。这样，more-info 弹出窗口的宽度始终与 col-4 相同。

那就这样吧

#services-menu .col-4 .more-info {
    display: none;
position: absolute;
width: 100%; /*instead of the 13.08511% you have as default. */
height: 201px;
background: #ffffff;
overflow: hidden;
z-index: 999;
-moz-transition: bottom, 0.3s, ease-in-out;
-o-transition: bottom, 0.3s, ease-in-out;
-webkit-transition: bottom, 0.3s, ease-in-out;
transition: bottom, 0.3s, ease-in-out;
line-height: 1.3;
}

我认为你不需要媒体查询，所以从你的 css 中删除它。

@media only screen and (min-width: 1441px){
  #services-menu .col-4 .more-info {
  width: 8.51064%;
  }
}

一旦你这样做了。一切都会好起来的。

编辑结束

---

$("div.intro-content").hover(
  function() {
    $(this).find("div.more-info").stop().animate({
      opacity: 1
    }, 500);
  },
  function() {
    $(this).find("div.more-info").stop().animate({
      opacity: 0
    }, 200);
  });

.wrapper {
  margin: 0 auto;
  width: 940px;
  overflow: hidden;
}

#services-menu {
  position: absolute;
  width: 100%;
  height: 272px;
  background: blue;
  margin-top: 83px;
  z-index: 5;
}
#services-menu #services {
  padding: 25px 0;
}
#services-menu .col-4 {
  position: relative;
  background: blue;
  color: black;
  text-align: center;
  height: 201px;
  padding: 32px 0;
  overflow: visible;
}
#services-menu .col-4 .intro-content:hover + .more-info {
  opacity: 1.0;
  display: block;
  visibility: visible;
  z-index: 100000;
}
#services-menu .col-4 .more-info {
  /* position:absolute;
  width: 123px;
  height: 201px;
  background: white;
  overflow: hidden;
  z-index: 9999;
  visibility: hidden;
  padding: 10px;
  text-align: left;
  line-height: 1.3;
          top: -27px;
          left: 41%; */
  display: none;
  position: absolute;
  width: 123px;
  height: 201px;
  background: white;
  overflow: hidden;
  z-index: 999;
  top: 130px;
  left: 44%;
}
#services-menu .col-4 .more-info:active {
  display: block;
}
#services-menu .col-4 .more-info:hover {
  display: block;
}
#services-menu .col-4 .more-info a {
  text-transform: uppercase;
  text-decoration: none;
  color: blue;
}
#services-menu .col-4 .more-info a:hover {
  color: red;
}
#services-menu .col-4 img {
  display: block;
  margin: 0 auto;
  padding-bottom: 18px;
}
#services-menu .col-4 a {
  color: blue;
  text-decoration: none;
}
#services-menu .col-4 a span {
  display: block;
}

<section id="services-menu">
  <div class="wrapper">
    <div id="services">
      <div class="col-4">
        <div class="intro-content">
          <img src="http://placehold.it/156x96">
          <a href="#">Service Name</a>
        </div>
        <!-- /.intro-content -->
        <div class="more-info">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt eros quis odio porttitor rhoncus. Ut condim</p>
          <p><a href="#">Start Here</a></p>
        </div>
        <!-- /.more-info -->
      </div>
      <!-- /.col-4 -->
      <div class="col-4">
        <div class="intro-content">
          <img src="http://placehold.it/156x96">
          <a href="#">Service Name</a>
        </div>
        <!-- /.intro-content -->
        <div class="more-info">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt eros quis odio porttitor rhoncus. Ut condim</p>
          <p><a href="#">Start Here</a></p>
        </div>
        <!-- /.more-info -->
      </div>
      <!-- /.col-4 -->
      <div class="col-4">
        <div class="intro-content">
          <img src="http://placehold.it/156x96">
          <a href="#">Service Name</a>
        </div>
        <!-- /.intro-content -->
        <div class="more-info">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt eros quis odio porttitor rhoncus. Ut condim</p>
          <p><a href="#">Start Here</a></p>
        </div>
        <!-- /.more-info -->
      </div>
      <!-- /.col-4 -->
      <div class="col-4">
        <div class="intro-content">
          <img src="http://placehold.it/156x96">
          <a href="#">Service Name</a>
        </div>
        <!-- /.intro-content -->
        <div class="more-info">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt eros quis odio porttitor rhoncus. Ut condim</p>
          <p><a href="#">Start Here</a></p>
        </div>
        <!-- /.more-info -->
      </div>
      <!-- /.col-4 -->
    </div>
    <!-- /#services -->
  </div>
  <!-- /.wrapper -->
</section>
<!--/ #services-menu -->