Javascript 引导3悬停时折叠

我在这个网站上工作

第二部分中的三个图像会在单击时触发引导折叠功能。我希望它们在悬停时显示，不悬停时隐藏

我需要改变什么

<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>

$（“.paneltab1”）。悬停(
函数（）{
$（#collapsepane1'）。collapse（'show'）；
}，函数（）{
$（'#collapsepane1'）。collapse（'hide'）；
}
);
获取更新
违反协议
拥抱{OPEN}软件
开放网络峰会

2015年6月15日至18日

圣克拉拉会议中心

小组2
拥抱{OPEN}软件
开放网络峰会

2015年6月15日至18日

圣克拉拉会议中心

小组3
拥抱{OPEN}软件
开放网络峰会

2015年6月15日至18日

圣克拉拉会议中心

---

您可以使用jquery的悬停和引导程序的折叠javascript，如下所示：

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

第一个函数（）{}用于鼠标进入时，第二个函数用于鼠标离开时

更多信息请点击此处：

我使用GetElementbyID将mouseover上的类从“collapse”更改为“collapse in”，并将mouseout上的类从“collapse in”更改为“collapse”，效果很好

---

document.getElementById（“panelid”）.className=“折叠”

仅在鼠标悬停时触发内容是用户对移动用户的敌意。请考虑避免它。@ CvReBebe有办法让它在悬停和友好的移动用户上工作吗？这对我来说似乎不起作用。我编辑了原始帖子来展示我的尝试。我和谁搞砸了？