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

我有这个液体代码：

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

---

我现在可以使用

display:none

，但是当我悬停时，如何在按钮之间动态切换呢？

你必须使用CSS来显示悬停时的不同图标

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

或者用开发人员的话来说——您正试图通过前端加载后端功能，这是一个很大的“不”

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>

.图标--悬停{
显示：无；
}
.btn--四舍五入：悬停.icon{
显示：无；
}
.btn--四舍五入：悬停.icon--悬停{
显示：块；
}

<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>