Блог

У меня есть этот жидкий код:

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

Это решение не требует 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>
  

Я думаю, у меня есть решение для вас.

Вам нужно добавить атрибут данных, содержащий требуемый «текст наведения», как вы сами предложили. Вот как я это сделал:

 <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);
}
  

Надеюсь, это поможет. Я могу уточнить что-нибудь, если вам это нужно, так что дайте мне знать, если вы это сделаете.