jquery - 页脚滑过内容

Question

我正在尝试构建一个页脚，在您将鼠标悬停在页脚上之前，部分内容会被隐藏。我已经尝试了一些方法，按照我发现但无法使其正常工作的教程，我能得到的最接近的方法是使用 jquery slidetoggle，但这会将页脚向下推，而不是向上推到正文上方。

基于 Bootstrap 构建 - JS Fiddle here .

HTML

  <div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h2>title</h2>
            <h4>footer should slide over content</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, inventore.</p>
            <p>Magni cumque maiores minus eius accusantium placeat quod architecto neque.</p>
            <p>Tempora sint vitae nulla recusandae, velit similique fuga animi beatae.</p>
        </div>
    </div>
</div>

<footer>
    <div class="container">
      <div class="row">
        <div class="col-sm-5 col-sm-offset-1 col-xs-12 left">

          <p><a href="/contact.html">Contact & Connect</a></p>
        </div>

        <div class="col-sm-6 right">
          <p class="pull-right">Your Address Here<a href="tel:+12022452726">202 - 555 - 1234</a></p>
        </div>

      </div>
    </div><!--container-->

    <div class="hiddenfooter">
      <div class="container">
        <div class="row">
          <div class="col-sm-3 border-left" data-match-height="footer-group">
           <h4>Contact US</h4>
           <p>Open to the public every day from 8am to 5pm</p>

           <h5>Admission is Free</h5>

           <p>Your Address Here</p>

           <p>Tel: <a href="tel:+12022452726">202.245.2726</a></p>
          </div>

          <div class="col-sm-3 border-left" data-match-height="footer-group">
            <img src="http://lorempixel.com/100/100" alt="" class="footer-center">
            <h4>Lorem ipsum dolor sit amet, consectetur.</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur quam reprehenderit dolorem consectetur expedita incidunt cum doloremque, nesciunt vitae assumenda.</p>
          </div>

          <div class="col-sm-3 border-left" data-match-height="footer-group">
            <h4>Support USNA</h4>
            <img src="/images/supportusna-red.jpg" alt="">
          </div>

          <div class="col-sm-3 border-left" data-match-height="footer-group">

          <h4>Sign up Now for Email Updates!</h4>

            <form>

              <div class="form-group">
                <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
              </div>

              <div class="form-group">
                <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
              </div>

              <input type="submit" value="" >
            </form>
            <div class="border-right"></div>
          </div>
        </div><!--row-->
      </div><!--container-->
      <div class="footer-bottom"></div>
      <div class="container">
        <div class="row copyright">
          <div class="col-sm-3">
            &copy; Lorem ipsum dolor.
          </div>
          <div class="col-sm-9 ">
            <a href="#">Lorem ipsum.</a>
            <a href="#">Lorem ipsum.</a>
            <a href="#">Lorem ipsum.</a>
          </div>
        </div>
      </div><!--container-->

    </div><!--hiddenfooter-->
  </footer>

JS

// show hide footer on hover
$(document).ready(function() {


    $("footer").hover(function () {
        $(".hiddenfooter").slideToggle("750");
    });

});

Answer 1

尝试在页脚上使用绝对定位和 bottom: 0 的 CSS。

这是我对您的 jsFiddle 所做的唯一更新——请参阅 jsFiddle 的更改 here .您可能需要对其进行调整才能获得您想要的效果，但我认为这已经很接近了!