내용 위로 내용 꼬리말

Question

꼬리말 위로 마우스를 가져갈 때까지 내용의 일부가 숨겨져있는 바닥 글을 작성하려고합니다. 내가 찾은 튜토리얼을 따라 몇 가지 시도했지만 couldnt '제대로 작동하도록 얻을 수있는 가장 가까운 jquery slidetoggle을 사용하여 얻을 수 있지만 위로 및 아래로 본문 위로 아래로 푸시합니다.

부트 스트랩 내장 - .

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입니다. 당신은 당신이 원하는 효과를 얻기 위해 그것을 꼬집어 야하지만 이것은 가까운 것이라고 말할 수 있습니다!