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

이 희망을 시도해보십시오. 이

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