Question

我希望实现一些简单的事情，但是要挂断它。以下是我要查看的内容的粗略副本：http://codepen.io/anon/pen/LGZaPr

我的Sass为col-4父母：

      .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 */ }

位置相对将阻止弹出框溢出。

接下来是您的媒体查询。

您已根据网页的视口设置了宽度。它应该不是那样的.. 您应该将其设置为col-4的width: 100%，然后可以基于视口。这样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%; } }

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

END OF EDIT

$("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>  <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>  </div>  <div class="col-4"> <div class="intro-content"> <img src="http://placehold.it/156x96"> <a href="#">Service Name</a> </div>  <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>  </div>  <div class="col-4"> <div class="intro-content"> <img src="http://placehold.it/156x96"> <a href="#">Service Name</a> </div>  <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>  </div>  <div class="col-4"> <div class="intro-content"> <img src="http://placehold.it/156x96"> <a href="#">Service Name</a> </div>  <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>  </div>  </div>  </div>  </section>

将鼠标悬停在div上以显示隐藏的div - 保持活动超过父级高度

1 个答案: