Question

解决*

我希望图片具有超链接。文本已经是，但我似乎无法对图像做同样的事情。它基本上有覆盖的图像，然后是它下面的超链接产品标题。我需要它将图像重定向到同一个链接。

这是代码：------------------ image ------------------------ -

<div class="block2"> 
    {% assign product_created_at = product.created_at | date: '%s' %}
    {% assign time_ago = 'now' | date: '%s' | minus: product_created_at | divided_by: 86400 %} 
    {% assign product_new_time = settings.product_new_time | times: 1 %} 

    <div class="block2-img wrap-pic-w of-hidden pos-relative
        {% if time_ago < product_new_time %}block2-labelnew{% endif %}
        {% if on_sale %} block2-labelsale{% endif %}"> 
        <a href="{{ product.url | within: collection }}">
            <img class="" src="{{ product.featured_image.src | img_url: img_size }}" alt="{{ product.featured_image.alt | escape }}">
        </a>
    </div>
</div>

-------------------------------- TEXT WORKING HYPERLINK ------------ -----------

<div class="block2-txt p-t-20">
    <a href="{{ product.url | within: collection }}" class="block2-name dis-block s-text3 p-b-5">
        {{ product.title }}
    </a>
    {% if product.compare_at_price > product.price %}
        <span class="block2-oldprice m-text7 p-r-5"> {{ product.compare_at_price_max | money }} </span> <span class="block2-newprice m-text8 p-r-5"> {{ product.price | money }} </span>
    {% else %}
        <span class="block2-price m-text6 p-r-5"> {{ product.price | money }} </span>
    {% endif %}
</div>

`

导致HTML

<!-- Block2 -->
<div class="block2">
  
  
  
  <div class="block2-img wrap-pic-w of-hidden pos-relative  ">
    <a href="/products/boxy7-t-shirt-with-roll-sleeve">
      <img class="" src="//cdn.shopify.com/s/files/1/2672/5778/products/item-15_7ca55ba5-301e-4461-92ea-68c8b02e35e7_1200x1600.jpg?v=1515096104" alt="Boxy7 T-Shirt with Roll Sleeve">
    </a>
    <div class="block2-overlay trans-0-4">
      <a href="/products/boxy7-t-shirt-with-roll-sleeve" class="block2-btn-addwishlist hov-pointer trans-0-4">
        <!-- <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i> -->
      </a>
      <div class="block2-btn-addcart w-size1 trans-0-4">
        <!-- Button -->
        <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" data-toggle="tooltip" data-loading-text="Loading..." title="Add to Cart" onclick="cart.add('8772548722730', 'Boxy7 T-Shirt with Roll Sleeve');">
          Add to Cart
        </button>
      </div>
    </div>
  </div>
  <div class="block2-txt p-t-20">
    <a href="/products/boxy7-t-shirt-with-roll-sleeve" class="block2-name dis-block s-text3 p-b-5">
      Boxy7 T-Shirt with Roll Sleeve
    </a>
    
    <span class="block2-price m-text6 p-r-5">
      <span class=money>$20.00</span>
    </span>
    
  </div>
</div>

Solis Ortus帮忙，结果就是这样：

<div class="block2-img wrap-pic-w of-hidden pos-relative {% if time_ago < product_new_time %}block2-labelnew{% endif %} {% if on_sale %} block2-labelsale{% endif %}">
    <a href="{{ product.url | within: collection }}">
      <img class="" src="{{ product.featured_image.src | img_url: img_size }}" alt="{{ product.featured_image.alt | escape }}">
    </a>
    <div class="block2-overlay trans-0-4" onclick="location.href= '{{ product.url }}'" >
      <a href="{{ product.url }}" class="block2-btn-addwishlist hov-pointer trans-0-4">
        <!-- <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i> -->
      </a>
      <div class="block2-btn-addcart w-size1 trans-0-4">
        <!-- Button -->
        <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" data-toggle="tooltip" data-loading-text="{{ 'products.product.loading' | t }}" title="{{ 'products.product.add_to_cart' | t }}" onclick="cart.add('{{ product.variants.first.id }}', '{{ product.title }}');">
          {{ 'products.product.add_to_cart' | t }}
        </button>
      </div>
    </div>
  </div>

这是创建假游标的CSS部分

/* ------------------------------------ */
.block2-overlay:hover {
  opacity: 1;
  cursor: pointer;
}

Answer 1

链接的示例网上商店在Firefox上不起作用，因为黑色半透明叠加div位于链接前面。当我隐藏叠加层时它适用于我（鼠标指针改变）。

内联样式的概念证明（仅用于演示）。我已使用display:none;

隐藏了div

<div class="block2">
  <div class="block2-img wrap-pic-w of-hidden pos-relative  ">
    <a href="/products/boxy-t-shirt-with-roll-sleeve-detail">
      <img class="" src="//cdn.shopify.com/s/files/1/2672/5778/products/item-03_1200x1600.jpg?v=1514269273" alt="Boxy T-Shirt with Roll Sleeve Detail">
    </a>
    <div class="block2-overlay trans-0-4" style="display: none;">
      <a href="/products/boxy-t-shirt-with-roll-sleeve-detail" class="block2-btn-addwishlist hov-pointer trans-0-4">
        <!-- <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i> -->
      </a>
      <div class="block2-btn-addcart w-size1 trans-0-4">
        <!-- Button -->
        <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" data-toggle="tooltip" data-loading-text="Loading..." title="" onclick="cart.add('8250556252202', 'Boxy T-Shirt with Roll Sleeve Detail');" data-original-title="Add to Cart">
          Add to Cart
        </button>
      </div>
    </div>
  </div>
  <div class="block2-txt p-t-20">
    <a href="/products/boxy-t-shirt-with-roll-sleeve-detail" class="block2-name dis-block s-text3 p-b-5">
      Boxy T-Shirt with Roll Sleeve Detail
    </a>

    <span class="block2-price m-text6 p-r-5">
      <span class="money" data-currency-usd="$20.00">$20.00</span>
    </span>

  </div>
</div>

请使用网络浏览器调试器检查您的示例中是否也有叠加层。如果是，它解释了为什么代码段正常工作，因为在代码段中没有CSS。

编辑以回答评论：

使用锚标记包装div也不适用于我（可能无效的HTML？）。你可以添加一个到div的链接：在下面的代码示例中通过JavaScript或脏黑客添加事件：hover元素上的onclick="location.href='/products/boxy-t-shirt-with-roll-sleeve-detail'"和带有css的虚假鼠标指针。

<div class="block2-img wrap-pic-w of-hidden pos-relative  ">
    <a href="/products/boxy-t-shirt-with-roll-sleeve-detail">
      <img class="" src="//cdn.shopify.com/s/files/1/2672/5778/products/item-03_1200x1600.jpg?v=1514269273" alt="Boxy T-Shirt with Roll Sleeve Detail">
    </a>
    <div class="block2-overlay trans-0-4" onclick="location.href='/products/boxy-t-shirt-with-roll-sleeve-detail'" >
      <a href="/products/boxy-t-shirt-with-roll-sleeve-detail" class="block2-btn-addwishlist hov-pointer trans-0-4">
        <!-- <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i> -->
      </a>
      <div class="block2-btn-addcart w-size1 trans-0-4">
        <!-- Button -->
        <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" data-toggle="tooltip" data-loading-text="Loading..." title="" onclick="cart.add('8250556252202', 'Boxy T-Shirt with Roll Sleeve Detail');" data-original-title="Add to Cart">
          Add to Cart
        </button>
      </div>
    </div>
  </div>

第1739行

main.css：

/* ------------------------------------ */
.block2-overlay:hover {
  opacity: 1;
  cursor: pointer;
}

编辑：回答2018-05-30的下一条评论：

确保添加到购物车按钮位于悬停面板的前面。停止事件冒泡。

<div class="block2">
  <div class="block2-img wrap-pic-w of-hidden pos-relative  ">
    <a href="/products/boxy-t-shirt-with-roll-sleeve-detail">
      <img class="" src="//cdn.shopify.com/s/files/1/2672/5778/products/item-03_1200x1600.jpg?v=1514269273" alt="Boxy T-Shirt with Roll Sleeve Detail">
    </a>
      <div class="block2-overlay trans-0-4" onclick="location.href='https://fashe-theme.myshopify.com/products/boxy-t-shirt-with-roll-sleeve-detail'">
      <a href="/products/boxy-t-shirt-with-roll-sleeve-detail" class="block2-btn-addwishlist hov-pointer trans-0-4">
        <!-- <i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
        <i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i> -->
      </a>
      <div class="block2-btn-addcart w-size1 trans-0-4">
        <!-- Button -->
        <button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" data-toggle="tooltip" data-loading-text="Loading..." title="" onclick="cart.add('8250556252202', 'Boxy T-Shirt with Roll Sleeve Detail');event.stopPropagation();" data-original-title="Add to Cart">
          Add to Cart
        </button>
      </div>
    </div>
  </div>
  <div class="block2-txt p-t-20">
    <a href="/products/boxy-t-shirt-with-roll-sleeve-detail" class="block2-name dis-block s-text3 p-b-5">
      Boxy T-Shirt with Roll Sleeve Detail
    </a>

    <span class="block2-price m-text6 p-r-5">
      <span class="money" data-currency-usd="$20.00">$20.00</span>
    </span>

  </div>
</div>

这意味着：我们必须在按钮的event.stopPropagation();中添加onclick。

编辑HTML / CSS主题，但似乎无法正确编辑它

1 个答案: