悬停在移动设备上无法在我的 Shopify Carousel 上运行

Question

我制作了一个带有悬停和可点击链接的轮播，在桌面和移动设备上都可以工作，但在移动设备上，当我点击图片时，它会立即重定向我，但我希望第一次触摸应该是悬停图片，第二次点击会将我重定向到 url。

现场演示 https://strokes-test.myshopify.com/

精选集

  <div class="page-width">
    <div class="proTitle">
      <h2>{{ section.settings.title }}</h2>
    </div>
      <div class="proText">
        {{ section.settings.text }} 
      </div>
    <div class="product-section-in">
      {% for product in collections[section.settings.collection].products %}
      <div class="prodBx">
        <div class="prodBx-imgBx">
          <div class="prod-img">
           <a href="{{ product.url | within: collection }}" class="grid-link">
            
         {% if product.compare_at_price > product.price %}
           <div class="featured-tag">
            <span class="badge badge--sale">
             <span class="gift-tag badge__text{% if sale_text.size > 9 %} badge__text--small{% endif %}">Save {{ product.compare_at_price | minus: product.price  | money | replace: '0,', ''}} </span>
            </span>
           </div>
         {% endif %}
            
        <div class="ImageOverlayCa"></div>
        {% if product.images.size > 1 %}
        <div class="reveal"> 
          <span class="product-additional">      
            <img class="" src="{{ product.images.last | product_img_url: 'large' }}" alt="{{ product.images.last.alt | escape }}" />
          </span>
            <img src="{{ product.featured_image.src | img_url: 'large' }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">
        </div>      
        {% else %}
        <img src="{{ product.featured_image.src | img_url: 'large' }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">
        {% endif %}
        </a>
          
          </div>
          
          <div class="prod-name">
            <div class="prod-name-in">
              <h2>{{ product.title }}</h2>
            </div>
          </div>
          <!--
          <div class="pro_label service_type">
            <img src="{{ 'prod_icon_service.png' | asset_url }}">
          </div>
      -->
        </div>
        <!--<P class="proPrice">{{ product.price | money }}</P>-->
        
        <div class="proPrice">{% include 'product-slick-price', product: product, show_vendor: show_vendor %}</div>
        <a class="proBtn" href="{{ product.url }}">Shop Now</a>
      </div>
      {% endfor %}
      {% for block in section.blocks %}
      <div class="prodBx">
        <div class="prodBx-imgBx">
          <div class="prod-img">
            <img src="{{ block.settings.img | img_url: 'master' }}">
          </div>
          <div class="prod-name">
            <div class="prod-name-in">
              <h2>{{ block.settings.name }}</h2>
 
            </div>
          </div> 
        </div>
        <a class="proBtn" href="{{ block.settings.link }}">{{ block.settings.btn }}</a>
      </div>
      {% endfor %}
    </div>
    {% if section.settings.art_back %}
    <div class="favBack art-svg">
      {% include 'art-svg' %}
    </div>
    {% else %}
    <div class="favBack">
      {% include 'favorite-back' %}
    </div>
    {% endif %}
    {% if section.settings.arrow_back %}
    <div class="favLeft arrowBx">
    {% include 'grey-arrow' %}
      {% include 'white-curve' %}
    </div>
    <div class="favright arrowBx">
      {% include 'white-arrow' %}
    </div>
    {% endif %}
  </div>
</div>


{% schema %}
  {
    "name": "Collection",
    "settings": [
    {
      "type":"checkbox",
      "id":"grey_back",
      "label":"Enable Grey Backgrouond"
    },
    {
      "type":"checkbox",
      "id":"art_back",
      "label":"Enable art Backgrouond"
    },
    {
      "type":"checkbox",
      "id":"arrow_back",
      "label":"Enable Left Right Backgrouond"
    },
    {
      "type":"checkbox",
      "id":"custom_back",
      "label":"Enable Custom Backgrouond"
    },
    {
      "type":"text",
      "id":"title",
      "label":"Title"
    },
    {
      "type":"richtext",
      "id":"text",
      "label":"Text"
    },
      {
      "type":"collection",
      "id":"collection",
      "label":"Collection"
    }
],
"blocks":[
  {
    "type":"Image",
    "name":"Service",
    "settings":[
    {
      "type":"image_picker",
      "id":"img",
      "label":"Image"
    },
    {
      "type":"text",
      "id":"name",
      "label":"Product Name"
    },
    {
      "type":"text",
      "id":"reviewNumber",
      "label":"Review Number"
    },
    {
      "type":"text",
      "id":"price",
      "label":"Price"
    },
    {
      "type":"text",
      "id":"btn",
      "label":"Button Name"
    },
    {
      "type":"url",
      "id":"link",
      "label":"Button Link"
    },
    {
      "type":"checkbox",
      "id":"pro_type",
      "label":"Service Type"
    }
  ]
  }
],
"presets":[
  {
    "name":"Collection",
    "category":"New"
  }
]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

css

.prod-img:hover .product-additional { visibility: visible;  opacity: 1; -webkit-transform: translateX(0);-moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0);transform: translateX(0);}

Answer 1

悬停事件不会在移动浏览器上触发（因为悬停是您只能使用鼠标等指点设备执行的操作）

如果您想要这种交互，则必须跟踪您点击每个项目的次数，因此第一次点击会切换图像，第二次点击会将您带到所需的页面。

我建议不要这样做，因为它的用户体验很差，而且用 vanilla JS 编程很麻烦