上的mouseenter获得焦点

Question

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显示块和鼠标离开我想提出的的mouseenter那s01不显示。

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

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

我该如何解决这个问题？

Answer 1

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类，但它不使用）。如果您不需要，可以在s01中添加data-*属性（例如data-index），以便您可以将它们与关联的c01相关联。 您可以尝试通过查看以下兄弟姐妹来检索它（但我不会这么做）。