WordPress子比主题首页更多栏目的虚拟横杠特效

我们在开发WordPress子比主题的时候想要实现首页的更多栏目下增加一个虚拟横杠，并且这个虚拟横杠可以根据我的鼠标移动去显示，并且鼠标移开后自动跑到第一个栏目下。

定位文件：\zibll\inc\functions\zib-index.php（第100行）

主要增加了一个<div id="underline"></div>标签，修改代码如下：

return '<div class="index-tab mb10 affix-header-sm relative" offset-top="-9"><ul style="width:100%;" class="scroll-x no-scrollbar">' . $html . '</ul><div id="underline"></div></div>';

相关JS代码（代码可以放在主题设置-自定义代码）：

var scrollXUl = document.querySelector('.scroll-x.no-scrollbar');
var underline = document.createElement('div');
underline.id = 'underline';
scrollXUl.appendChild(underline);

var lis = scrollXUl.getElementsByTagName('li');

for (var i = 0; i < lis.length; i++) {
  lis[i].addEventListener('mouseenter', function() {
    var textWidth = this.clientWidth; // 获取当前li标签内文字的宽度
    var left = this.offsetLeft + (this.clientWidth - textWidth) / 2; // 计算横杠的左偏移量
    underline.style.left = left + 'px'; // 设置横杠的左偏移量
    underline.style.width = textWidth + 'px'; // 设置横杠的宽度与文字一致
  });
}

相关CSS代码（代码可以放在主题设置-自定义代码）：

/*首页栏目切换*/
.index-tab ul > li {
  padding: 8px 11px;
  border-radius: 5px;
}
.ajax-option.ajax-replace .flex.ac {
	background: var(--main-bg-color);
	margin-bottom: -10px;
}
.index-tab.mb10.affix-header-sm.relative .scroll-x.no-scrollbar{
  background: var(--main-bg-color);
  padding: 16px;
  margin-bottom: -10px;
}
/*首页文章列表*/
.posts-item.no_margin {
  border-bottom: 1px solid var(--main-border-color);
}
/*文章分类多分类滑动模块*/
.ajax-option.ajax-replace .flex.ac {
  margin-bottom: auto;
}
/*增加首页5个分类栏目的虚拟横杠*/
#underline {
  height: 2px;
  background-color: var(--theme-color);
  position: absolute;
  bottom: -5px; /* 调整横杠与文字之间的距离 */
  transition: left 0.3s ease;
}
/*改变首页5个分类的文字和背景颜色*/
.index-tab ul > li.active {
  background: unset;
  --main-color: #fff;
}
.index-tab ul > li.active a {
  color: var(--theme-color) !important;
}
/*删除导航的befoer*/
.navbar-top li.current-menu-item::before, .navbar-top li.current-menu-item > a::before, .navbar-top li:hover::before, .navbar-top li:hover > a::before {
  opacity: 0!important;
}
/*隐藏帖子发布页面选择板块的虚拟横杠*/
ul.list-inline.scroll-x.no-scrollbar.tab-nav-but #underline {
    display: none;
}
/*移动端隐藏虚拟横杠*/
@media (max-width: 767px) {
  #underline {
    display: none;
  }
}