上的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相關聯。 您可以嘗試通過查看以下兄弟姐妹來檢索它（但我不會這麼做）。