Bootstrap 3 Свернуть на hover

Question

Я работаю на этом сайте здесь. http://opennetsummit.wpengine.com/

Три изображения во втором разделе вниз запускают функцию коллапса бутстрапа при щелчке. Я бы хотел, чтобы они показывались на паре и прятались, когда не парили.

Что мне нужно изменить?

<script> 
     $(".paneltab1").hover(
    function() { 
     $('#collapsePanel1').collapse('show'); 
     }, function() { 
     $('#collapsePanel1').collapse('hide'); 
     } 
    ); 
</script> 

<div class="row panel-heading"> 
<div class="container"> 
    <div class="col-xs-3"> 
     <a class="paneltab1" data-toggle="collapse" href="#collapsePanel1" aria-expanded="false" aria-controls="collapsePanel1"> 
      <div class="panel-tabs"> 
       <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png"> 
       <h3>Workshops</h3> 
      </div> 
     </a> 
    </div> 


    <div class="col-xs-3 "> 
     <a class="" data-toggle="collapse" href="#collapsePanel2" aria-expanded="false" aria-controls="collapsePanel2"> 
      <div class="panel-tabs"> 
        <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png"> 
        <h3>Open Networking Summit</h3> 
      </div> 
     </a> 
    </div> 

    <div class="col-xs-3 "> 
     <a class="" data-toggle="collapse" href="#collapsePanel3" aria-expanded="false" aria-controls="collapsePanel3"> 
      <div class="panel-tabs"> 
       <div> 
        <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png"> 
        <h3>Webinars</h3> 
       </div> 
      </div> 
     </a> 
    </div> 

    <div class="col-xs-3 "> 
      <div class="panel-tabs"> 
       <div class="mid-form"> 
                 <h3>Get Updates</h3> 

                 </div> 
      </div> 
    </div> 
    </div> 
</div> 


<div class="collapse" id="collapsePanel1"> 
<div class="row"> 
    <div class="container"> 
     <div class="col-xs-12 hompage-panel"> 
      <div class="col-sm-4 center"> 
       <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png"> 
      </div> 
      <div class="col-sm-8"> 
       <h2>Defy Protocol </h2> 
       <h1>EMBRACE {OPEN} SOFTWARE</h1> 
       <h3>Open Networking Summit</h3> 
       <hr> 
       <p>June 15 - 18, 2015</p> 
       <p>Santa Clara Convention Center</p> 
       <a href="#" class="btn btn-more">More Information</a>  
      </div> 
     </div> 
    </div> 
</div> 
</div> 

<div class="collapse" id="collapsePanel2"> 
<div class="row"> 
    <div class="container"> 
     <div class="col-xs-12 hompage-panel"> 
      <div class="col-sm-4 center"> 
       <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png"> 
      </div> 
      <div class="col-sm-8"> 
       <h2>Panel 2 </h2> 
       <h1>EMBRACE {OPEN} SOFTWARE</h1> 
       <h3>Open Networking Summit</h3> 
       <hr> 
       <p>June 15 - 18, 2015</p> 
       <p>Santa Clara Convention Center</p> 
       <a href="#" class="btn btn-more">More Information</a>  
      </div> 
     </div> 
    </div> 
</div> 
</div> 

<div class="collapse" id="collapsePanel3"> 
<div class="row"> 
    <div class="container"> 
     <div class="col-xs-12 hompage-panel"> 
      <div class="col-sm-4 center"> 
       <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png"> 
      </div> 
      <div class="col-sm-8"> 
       <h2>Panel 3 </h2> 
       <h1>EMBRACE {OPEN} SOFTWARE</h1> 
       <h3>Open Networking Summit</h3> 
       <hr> 
       <p>June 15 - 18, 2015</p> 
       <p>Santa Clara Convention Center</p> 
       <a href="#" class="btn btn-more">More Information</a>  
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Вы можете использовать парить Jquery наряду с схлопывания JavaScript Bootstrap в, что-то вроде этого:

$(".panel-tabs").hover(
function() { 
    $('#collapsePanel3').collapse('show'); 
    }, function() { 
    $('#collapsePanel3').collapse('hide'); 
    } 
); 

Первая функция() {} является, когда мышь входит, второй для когда он уходит.

Больше информации здесь:

• http://api.jquery.com/hover/
• http://getbootstrap.com/javascript/#collapse-methods

Answer 2

Я изменил класс от "распада" до "коллапса" при наведении курсора мыши и от "коллапса" до "краха" с помощью GetElementbyID, и он работал нормально.

document.getElementById ("panelid"). ClassName = "collapse in";