在前一個 div 元素的焦點上顯示 div 元素

Question

html

<div class="channel">
   <div class="programs" id="p1"></div>
   <div class="selec_pro" id="s1" style="display:none;"></div>
   <div class="programs" id="p2"></div>
   <div class="selec_pro" id="s2" style="display:none;"></div>
   <div class="programs" id="p3"></div>
   <div class="selec_pro" id="s3" style="display:none;"></div>
   <div class="programs" id="p4"></div>
   <div class="selec_pro" id="s4" style="display:none;"></div>
</div>

類通道下的 div 元素是動態創建的。 在類程序的焦點上，該類程序 div 旁邊的 selec_pro 需要是顯示塊。 在焦點關閉 selec_pro 之后需要顯示 none。

任何人都可以幫忙嗎？

Answer 1

在 CSS 中試試這個：

.selec_pro {
    display: none;
}

.programs:focus + .selec_pro {
    display: block;
}

+是 CSS 相鄰兄弟選擇器。 請參閱此處： https : //developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors