Question

我希望有人可以帮助我。

我正在Shopify中建立一家商店，所以我的问题是液体和SASS。

我正在尝试将每个嵌套的导航菜单子项上的文本悬停颜色更改为不同的颜色，因此，当您将鼠标悬停在类别（让我们说）“墨西哥”上时，它将变为绿色，但是如果类别为“美国”变为蓝色。

我的客户是茶叶分销商，真的很喜欢颜色编码，因为他商店中的所有商品都是颜色编码的，所以他特别要求这样做（数量不多，而且永远都不会改变，因此不会有问题。对其进行硬编码）。我知道如何修改CSS并将它们全部变成一类和一种颜色，但这不会削减它，我似乎无法做到逻辑。

商店尚未公开，但https://tomas-te.myshopify.com/的密码提示框是

我尝试了几次失败：

一个IF循环，该循环根据集合句柄来调用不同的类（但是，由于代码在HEADER部分而不是在集合模板中，因此该代码将无法工作）。像这样修改每个SCSS：

header.site-header nav.site-nav__link ul > li > a[href="/collections/china"]{ color:#f397cc }

还有其他几种没有成功的方法。我确定一定有办法！而且我不介意它是否经过硬编码，只要它们的每个em都是不同的颜色：）

谢谢！

Answer 1

除非我丢失了某些内容，否则以下内容应该起作用：

header.site-header .site-nav__dropdown  a[href="/collections/china"]:hover {
  color:#f397cc;
}

header.site-header .site-nav__dropdown  a[href="/collections/india"]:hover {
  color:#17cc39;
}

您提供的代码在正确的轨道上，但是我觉得特异性太高了。

Answer 2

您可以使用handle filter将链接标题用作导航链接类的一部分。例如：

<a href="{{ link.url }}" class="site-nav__dropdown-link nav-{{ link.title | handle }}">{{ link.title }}</a>

然后，您可以在主SCSS文件中使用类.nav-china和.nav-india自定义这些项目。

您还可以检查link对象是否为集合，并使用collection.handle甚至collection.id作为链接类的一部分。取决于它可以进行多少次硬编码。

Answer 3

下面是导航栏下拉菜单的SCSS代码。

header{
    &.site-header{
        .site-nav{
            .inner-nav-containers{
                .site-nav__item{
                    &.site-nav--has-dropdown{
                        .site-nav__dropdown{
                            li{
                                a{
                                    transition: color 0.3s linear;
                                    &:hover{
                                        &[href="/collections/china"]{
                                            color: #f397cc;
                                        }
                                        &[href="/collections/india"]{
                                            color: green;
                                        }
                                        &[href="/collections/usa"]{
                                            color: red;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

将上述代码放在您的theme.scss.liquid文件中，它将起作用。

导航菜单链接已用逻辑修改。每个链接使用不同的颜色

3 个答案: