html - 如何在 Shopify 的 theme.liquid 文件中添加悬停图像

Question

我想知道当我将鼠标悬停在 Shopify 中的特定图像上时如何添加不同的图像。我的 theme.liquid 文件中目前有以下代码，但我不确定如何添加一些鼠标悬停代码来显示不同的图像。

<div class="site-header__phone">
                <a href="tel:123456789">{{ 'phone-icon.png' | asset_url | img_tag }} </a>
              </div>

穆斯塔法，

以下是我写的内容，因为它悬停在我添加的图标上而不是产品上，但页面显示“/> ”/> 这是不正确的..

<div class="site-header__phone">
                <a href="tel:123456789">
                  <img class="phone" src="{{ 'phone-icon.png' | asset_url | img_tag }}" /> 
                  <img class="phone_hover" src="{{ 'phone-icon-h.png' | asset_url | img_tag }}" />
                </a>
              </div>

CSS 是:

.site-header__phone {
  margin-top:6px;
  margin-left:15px;
}

.site-header__phone a img.phone_hover { display: none; }
.site-header__phone a:hover img.phone { display: none; }
.site-header__phone a:hover img.phone_hover { display: block; }

有什么地方我做错了吗？

Answer 1

试试这个，希望它对你有用。像这样给出Html部分

    <div class="image">
  <a href="{{ url }}">
     <img class="first" src="{{ product.images[0] | product_img_url: 'large' }}" alt="{{ product.title | escape  }}" />
     <img class="second" src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.title | escape  }}" />
   </a>
</div> 

还有像这样的 styles.css 样式表

.product .image a img.second { display: none; }
.product .image a:hover img.first { display: none; }
.product .image a:hover img.second { display: block; }