Question

我有一些CSS问题......

当您将鼠标悬停在here上的产品上时，您可以看到“立即显示”..

但是，当您将鼠标悬停在here上的产品上时，您可以看到“添加到购物车”，并且您还会看到“添加到购物车”的一些黑色背景，我不理解..

我可以知道我还需要在CSS中添加什么......？

这是我显示产品的代码：

<!-- Product List -->
<div class="pl">
  [product.each]

  <div class="t1 col3">



    <ul class="products ribbon">

      <li class="product">


        <a href="[product.link]">

          <div class="thumbnail">

              <img width="150" height="150" src="[product.image direct='1' tag='0']" class="attachment-shop_catalog wp-post-image" alt="[product.name]" title="[product.name]">    

              <div class="thumb-shadow"></div>

              <strong class="below-thumb">[product.name]</strong>  

            </div>


          <span class="price">

            <span class="amount">

              <?php if ($product->saleprice > 0 &&  $product->saleprice < $product->price) { ?>

                    <div class="prc">
                <small>
                   <span style="text-decoration: line-through; color:blue;">[product.currency mode='sign'][product.price]</span>&nbsp&nbsp
                   <span style="font-weight: bold; color:red;">[product.currency mode='sign'][product.saleprice]</span>
                </small>
                    </div>
                    <?php } else { ?>
                    <div class="prc">
                <small>
                  <span style="font-weight: bold; color:blue;">[product.currency mode='sign'][product.price]</span>
                </small>
                    </div>    

                <?php } ?>                


              </span>

            </span>

          </a>



          <div class="buttons" style="opacity: 0; visibility: visible; overflow: hidden; height: 41px; ">
                <a href="[product.link]"  class="add-to-cart add_to_cart_button product_type_simple" style="position: relative; top: -41px; ">SHOP NOW</a>
           </div>      


      </li>    


    </ul>



  </div>  <!-- t1 col3 #end --> 


      [/product.each]
      <div class="clearingdiv"> </div>

 </div>
<!-- /Product List -->

所以，请告诉我我错过了什么..？你可以在源代码中找到CSS代码......

Answer 1

他们使用了background image。

在您的情况下，您需要将背景设置为.buttons或其中的锚点。

BTW：请停止使用内联样式表;请改用单独的<style>块或外部CSS文件。这样，您的CSS就更容易阅读和理解。

如何解决这个CSS问题？

1 个答案: