我一直想知道当我将鼠标悬停在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; }


有什么想法我做错了吗?

最佳答案

尝试这种希望对您有用。像这样给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; }

关于html - 如何在Shopify中的theme.liquid文件中添加悬停图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39755508/

10-09 15:17
查看更多