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