悬停时包含不同的按钮图标

Question

我有这个液体代码：

<a href="{{ section.settings.button_link }}" class="btn--rounded">
    {% include 'icon-btn--rounded' %}
    <div class="link-label">{{ section.settings.button_label }}</div>
</a>

当按钮悬停时，我需要显示不同的图标，例如：

{% include 'icon-btn--white' %}

我现在可以使用 display: none 了，但是当我悬停时如何在按钮之间动态切换？

Answer 1

您必须使用 CSS 才能在悬停时显示不同的图标。

Liquid 是一种在 DOM 准备就绪之前加载的语言。这意味着一旦您看到页面内容，流动代码就已完成执行，并且在重新加载页面之前不会再次触发。

或者用开发人员的话说 - 您正试图通过 front-end 加载 back-end 函数，这是一个很大的“no-no”。

CSS和JS不能和liquid交互，但是liquid可以和他们交互。或者更简单地说，您可以使用 Liquid 创建 javascript 和 css 代码，但不能使用 JS 和 CSS.

创建 liquid 代码

此外，include 已被弃用，您应该改用 render。

这是您应该使用的代码：

<a href="{{ section.settings.button_link }}" class="btn--rounded">
    <div class="icon">
        {% render 'icon-btn--rounded' %}
    </div><!-- /.icon -->
    <div class="icon icon--hover">
        {% render 'icon-btn--white' %}
    </div><!-- /.icon -->
    <div class="link-label">{{ section.settings.button_label }}</div>
</a>

<style>
    .icon--hover {
        display: none;
    }

    .btn--rounded:hover .icon {
        display: none;
    }
    .btn--rounded:hover .icon--hover {
        display: block;
    }
</style>

悬停时包含不同的按钮图标

Include a different button icon when hover

css

liquid

shopify