对 Wordpress Storefront 主题的主菜单应用 a:hover:before 条件

Posted 2023-03-06

【中文标题】对 Wordpress Storefront 主题的主菜单应用 a:hover:before 条件

【英文标题】：Applying a:hover:before condition for main menu on Wordpress Storefront theme

【发布时间】：2020-10-09 19:32:55

【问题描述】：

大家好！

我正在尝试在以 Wordpress + WooCommece + Storefront 主题运行的网站上为主菜单应用悬停效果。 悬停效果非常简单，但包含 a:hover:before 条件。 工作代码可以在这里查看https://codepen.io/0LEg_mao/pen/qBbRaPB

相同的代码应用于 Storefront 主题

    @media (min-width: 768px)ul.menu > li > a 
      position: relative;
     color: inherit;
      text-decoration: none;
     line-height: 24px;

        
    

    @media (min-width: 768px)ul.menu > li > a:before  
        content: '';
        position: absolute;
        transition: transform .5s ease;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: black;
        transform:  scaleX(0);
        
    

    @media (min-width: 768px)ul.menu > li > a:after 
        content: '';
        position: absolute;
        transition: transform .5s ease;
        
    
@media (min-width: 768px)ul.menu > li > a:hover:before 
 transform:  scaleX(1);
    

结果：我在浏览器开发工具 (F12) 中看到所有 CSS 代码都应用于主菜单，除了 a:hover:before 条件。 如何使 a:hover:before 条件适用于主菜单？

附：在此处发布指向我的网站的链接可能更有助于说明我正在尝试做的事情，但它可能违反规则

【问题讨论】：

欢迎来到 ***。只要您在minimal,reproducible example 的问题中包含相关代码，发布指向您网站的链接并不违反规则。该网站是一个问答网站，因此问题需要对将来可能遇到类似问题的其他用户有用。

@FluffyKitten 谢谢。这是链接prettify.ru它正在开发中，所以CSS样式有些混乱......我正在尝试将悬停效果添加到顶部的主菜单

我没有看到任何明显的问题导致问题，因此它可能是由您的插件之一甚至主题引起的。尝试禁用您的插件，看看它是否仍然发生。如果 css 工作正常，则一一启用插件，以查看导致问题的原因。如果它不是插件，那么它可能是主题中的东西。

终于我成功了。以防万一有人使用相同的主题和悬停效果组合：添加以下规则@media (min-width: 768px).main-navigation ul li a::before display: block !important;

【参考方案1】：

最后我成功了。以防万一有人使用相同的主题和悬停效果组合： 添加以下规则

@media (min-width: 768px).main-navigation ul li a::before      
display: block !important;