comment résoudre ce problème css?

Question

J'ai des problèmes de CSS ...

Lorsque vous passez la souris sur un produit de here, vous pouvez voir « montrer maintenant » ..

Mais lorsque vous passez la souris sur le produit de here, vous pouvez voir 'Addto Cart' et vous voyez aussi un fond noir pour 'Ajouter au panier' que je ne comprends pas ..

Puis-je savoir ce que j'ai encore à ajouter dans CSS ..? ici

est mon code qui affiche les produits:

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

donc, s'il vous plaît dites-moi ce que je manque ..? vous pouvez trouver le code CSS dans le code source ...

Answer 1

Ils ont utilisé un background image.

Dans votre cas, vous devez définir un arrière-plan à .buttons ou l'ancrage dans là.

BTW: s'il vous plaît arrêter d'utiliser des feuilles de style en ligne; utilisez un bloc <style> distinct ou un fichier CSS externe à la place. De cette façon, votre CSS est beaucoup plus facile à lire et à comprendre.