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

Question

已解决*

我希望图像具有超链接。文字已经是，但是我似乎无法对图像做同样的事情。它基本上具有叠加图像，然后是其下方的超链接产品标题。我需要它将图像重定向到相同的链接。

这是代码:----------------图像------------------------ --

<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>

--------------------------------文本工作超链接------------ ----------

<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。

---

编辑以回答评论:

用 anchor 标记包装 div 对我也不起作用(可能是无效的 HTML？)。您可以向 div 添加链接:在以下代码示例中通过 JavaScript 或肮脏的 hack 添加事件:onclick="location.href='/products/boxy-t-shirt-with-roll-sleeve-详细信息'" 在悬停元素和带有 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>

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