在鼠标输入获取下拉元素的焦点

on mouseenter getting focus of the dropdown elements

本文关键字：元素 焦点 鼠标 输入 获取      更新时间：2023-09-26

HTML

<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();
});
在类 c01 的鼠标输入上，我正在使 s01 显示

块，而在鼠标离开时，我正在使 s01 显示任何内容。

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

我无法选择程序。它正在显示下一个频道节目

我该如何解决这个问题？

Array.from(document.querySelectorAll(".c01")).forEach(function(c){
  c.addEventListener("mouseover", function(){
    var s = c.parentNode.querySelector(".s01");
    if(s) {
      s.style.display = "block";
    }
  });
  c.addEventListener("mouseout", function(){
    var s = c.parentNode.querySelector(".s01");
    if(s) {
      s.style.display = "none";
    }
  });
})
#c1{
  background-color: yellow;
  height: 10px;
}
#c2{
  background-color: red;
  height: 10px;
}
<div class="channellist" id="channellist">
  
  <div class="chanel-wrapper">
   <div class="c01" id="c1"></div>
   <div class="s01" style="display:none">
     <div>channel name</div>
      <div class="programs">
         <div>p1</div>
         <div>p2</div>
         <div>p3</div>
      </div>
   </div>
  </div>
  <div class="chanel-wrapper">
   <div class="c01" id="c2"></div>
   <div class="s01" style="display:none">
   <div>channel name</div>
      <div class="programs">
         <div>p1</div>
         <div>p2</div>
         <div>p3</div>
      </div>
   </div>
  </div>
  </div>
 <div class="c01" id="c3"></div>

我不得不在每个关联的c01和s01周围添加一个包装器(我给了它们channel-wrapper类，但它没有被使用(。如果您不希望这样做，您可以添加一个data-*属性(例如 data-index s01( 以便您可以将它们与关联的c01 链接。您可以尝试通过查看以下兄弟姐妹来检索它(但我不会这样做(。

相关文章：