悬停时在 Shopify 上更改 button_label

Question

我有这个液体代码：

<a href="{{ block.settings.button_link }}" class="btn--full">
                <div class="flex-btn">
                    {{ block.settings.button_label }}
                    {% render  'icon-arrow-right' %}
                </div>
            </a>

我需要在悬停时更改 button_label。有什么办法只用 CSS 就可以做到吗？或者我应该使用数据属性和 jQuery?

Answer 1

我想我有一个解决方案。

您需要按照您自己的建议添加包含所需 'hover text' 的数据属性。我是这样做的：

<a href="{{ block.settings.button_link }}" class="btn--full" >
  <div class="flex-btn">
    <span data-hover_text="Second placeholder text">
      {{ block.settings.button_label }}
    </span>
    {% render  'icon-arrow-right' %}
  </div>
</a>

请注意，我将文本放入 span。这很重要，因为我们不想干扰 icon-arrow-right.

接下来我们需要 jQuery。这是我的实现方式：

$(window).on('load', function(){
    $('.btn--full').on('mouseover mouseout', function(){
        flipText($('.flex-btn span'));
    });
});

function flipText(el) {
    // Get and store the current text present in element
    var currentText = $(el).text();
    
    // Get and store the placeholder text from the 'hover_text' data-attribute
    var placeholderText = $(el).data('hover_text');

    // Replace the current text with the placeholder text
    $(el).text(placeholderText);

    // Replace the data attribute 'hover_text' with the current text
    $(el).data('hover_text', currentText);
}

希望对您有所帮助。如果您需要，我可以详细说明，所以如果您需要，请告诉我。

Answer 2

此解决方案不需要 jQuery / Javascript。试试这个。

<a href="{{ block.settings.button_link }}" class="btn--full">
  <div class="flex-btn hoverTextArea">
    <span class="normalText">{{ block.settings.button_label }}</span>
    <span class="hoverText">TEXT TO BE DISPLAYED ON HOVER</span>
    {% render  'icon-arrow-right' %}
  </div>
</a>
<style>
  .hoverTextArea:hover .normalText,.hoverText{ display:none }
  .hoverTextArea:hover .hoverText{ display:initial }
</style>

悬停时在 Shopify 上更改 button_label

Change button_label on Shopify when hover

css

jquery

liquid

shopify