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

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

这是我对你的jsFiddle所做的唯一更新 - 请参阅jsFiddle的变化here。您可能需要调整它以获得您想要的效果，但我会说这很接近！

页脚滑过内容

1 个答案: