文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >正在编辑HTML/CSS主题，但似乎无法正确编辑

问正在编辑HTML/CSS主题，但似乎无法正确编辑
EN

Stack Overflow用户
提问于 2018-05-23 03:15:46
回答 1查看 200关注 0票数 0

已解决*

我想要的图像是超链接。文本已经是了，但是我似乎不能对图像做同样的事情。它基本上有覆盖的图像，然后在它下面的超级链接的产品标题。我需要它将图像重定向到相同的链接。

下面是代码：

代码语言：javascript
复制
<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>

代码语言：javascript
复制
<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

​

代码语言：javascript
复制
<!-- 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提供了帮助，结果如下：

​

代码语言：javascript
复制
<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部分，它在其中创建了一个假光标

​

代码语言：javascript
复制
/* ------------------------------------ */
.block2-overlay:hover {
  opacity: 1;
  cursor: pointer;
}

​

html
css
themes
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-23 04:21:00

链接的示例网络商店在Firefox上对我不起作用，因为深色的半透明覆盖图div在链接的前面。当我隐藏覆盖时，它对我起作用(鼠标指针改变)。

内联风格的概念证明(仅用于演示)。我已经用display:none;隐藏了分区

代码语言：javascript
复制
<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>

请使用web浏览器调试器检查在您的示例中是否也有覆盖。如果是，它解释了为什么代码段可以工作，因为在代码段中没有CSS。

编辑以回答评论：

用锚标签包装div对我来说也不起作用(可能是无效的HTML?)。您可以在下面的代码示例中添加到div的链接:通过JavaScript或一个肮脏的黑客添加事件:在悬停元素上添加onclick="location.href='/products/boxy-t-shirt-with-roll-sleeve-detail'"，并使用css添加假鼠标指针。

代码语言：javascript
复制
<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：

代码语言：javascript
复制
/* ------------------------------------ */
.block2-overlay:hover {
  opacity: 1;
  cursor: pointer;
}

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

确保add-to-cart按钮位于悬停面板的前面。停止事件冒泡。

代码语言：javascript
复制
<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();。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50474975

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档