css 错误-突出显示活动/当前(按下)按钮

6jjcrrmo  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(74)

enter image description here
上图是标题菜单在点击/活动状态下的工作方式。
enter image description here
上面的图像在第二个标题菜单“MEN”中处于活动状态,但标题下方的突出显示未激活。
关于这个项目。这是一个购物的主题。第一张图片来自现场演示,在那里它工作得很好。第二个图像是添加到shopify的主题。
激活状态定义在“header-e-cormmerce.liquid”中
我对发展知之甚少。如果我的问题或解释是业余的,我道歉。

`.t4s-header__logo {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      .t4s-list-categories--item.is--active:after {
          content: '';
          width: calc(100% - 30px);
          height: 2px;
          display: block;
          box-shadow: 0 -2px 0 var(--h-text-color);
          margin: 0 15px;
          pointer-events: none;
      }
      .t4sp-hover .t4s-list-categories--item:not(.is--active):hover a:before {
          content: '';
          display: block;
          width: 90%;
          position: absolute;
          height: 50%;
          left: 5%;
          right: 5%;
          background-color: rgba(var(--h-text-color-rgb), 0.05);
          border-radius: 10px;
          transition: all .3s ease
      }
vxbzzdmp

vxbzzdmp1#

如果类已正确应用于活动菜单项,但未显示突出显示,则CSS样式可能存在问题。您可以尝试以下步骤来解决问题:
确保提供代码所在的CSS文件(header-e-commercial.liquid)正确地包含在Shopify主题中。检查文件是否正确加载,CSS代码中是否没有错误或冲突。
使用浏览器的开发工具检查活动菜单项。查找可能覆盖或隐藏高亮效果的任何冲突CSS样式。注意其他针对相同元素或伪元素的CSS规则(:after,:before),可能会干扰活动状态样式。
检查是否有任何JavaScript或jQuery脚本在您的Shopify主题上运行,这些脚本可能会修改或干扰活动状态样式。禁用或暂时删除任何此类脚本,以查看它是否解决了问题。
如果您仍然遇到困难,提供相关的HTML代码和与标题菜单相关的任何其他CSS或JavaScript代码将很有帮助,以便我可以帮助您进一步解决问题。

相关问题