时间戳

首页 > 解决方案 > 对 Wordpress Storefront 主题的主菜单应用 a:hover:before 条件

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

问题描述

厉害了大家！

我正在尝试在以 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条件适用于主菜单？

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

标签： csswordpressmenustorefront

解决方案

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

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

推荐阅读