我正在尝试构建一个页脚,在您将鼠标悬停在页脚上之前,部分内容会被隐藏。我已经尝试了一些方法,按照我发现但无法使其正常工作的教程,我能得到的最接近的方法是使用 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">
© 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");
});
});
最佳答案
尝试在页脚上使用绝对定位和 bottom: 0
的 CSS。
这是我对您的 jsFiddle 所做的唯一更新——请参阅 jsFiddle 的更改 here .您可能需要对其进行调整才能获得您想要的效果,但我认为这已经很接近了!
关于jquery - 页脚滑过内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24706993/