Javascript 鼠标指针获得下拉元素的焦点

HTML

在c01类鼠标上，我将s01设置为显示块，在mouseleave上，我将s01设置为不显示

有10个节目。我想选择程序。在鼠标输入时，当我试图通过滚动鼠标查看程序时，它将显示所有程序名，此时将显示下一个div的程序

我无法选择节目。它正在播放下一个频道的节目

如何解决此问题？

Array.from（document.querySelectorAll（.c01”）.forEach（函数（c）{
c、 addEventListener（“鼠标悬停”，函数（）{
var s=c.parentNode.querySelector（“.s01”）；
若有(s){
s、 style.display=“block”；
}
});
c、 addEventListener（“mouseout”，function（））{
var s=c.parentNode.querySelector（“.s01”）；
若有(s){
s、 style.display=“无”；
}
});
})

#c1{
背景颜色：黄色；
高度：10px；
}
#c2{
背景色：红色；
高度：10px；
}

频道名称
p1
p2
p3
频道名称
p1
p2
p3

您可以尝试这个可能的副本吗？请将您当前的JS代码添加到问题中。@Rorymcrossan我已经添加了我的脚本

<div class="channellist" id="channellist">
  <div class="c01" id="c1"></div>
  <div class="s01" style="display:none" id="p_c1">
     <div>channel name</div>
      <div class="programs">
         <div>p1</div>
         <div>p2</div>
         <div>p3</div>
      </div>
  </div>
  <div class="c01" id="c2"></div>
   <div class="s01" style="display:none" id="p_c2">
   <div>channel name</div>
      <div class="programs">
         <div>p1</div>
         <div>p2</div>
         <div>p3</div>
      </div>
  </div>

  </div>
 <div class="c01" id="c3"></div>

$(".c01").live("mouseenter mouseleave", function(){
    var id=this.id;
    $("#p_"+id).slideToggle();
});