CSSスケールの製品（カード）の上にマウスを置いてボタンを表示する

商品のリストを表示し、マウスで「購入」ボタンを表示したい。CSSスケールの製品（カード）の上にマウスを置いてボタンを表示する

カードには「購入」へのリンクがあり、残りのリンクブロックは製品ページにあります。（HTMLをチェックしてください）。

カードのアニメーションはスケールCSSで表示されますが、ボタンを表示するとCSSのブロックが途切れることがあります。

私はブートストラップを使用しています。

ありがとうございました！

CSS：

ul li { 
    list-style:none; 
    margin:0; 
    transition: all 100ms linear; 
    float:left; 
} 
ul li:hover { 
    transform: scale(1.1); 
    transition: all 100ms linear; 
    z-index:999; 
}

JS：

$('ul li').hover(
    function() { 
    $(this).find(".btn").fadeIn(100).css("display", "block"); 
    }, 
    function() { 
    $(this).find(".btn").fadeOut(100).css("display", "none"); 
    } 
);

Printscreen

View CodePen

出典

2017-05-05 Rhian Molinari

問題は、あなたの531428727321であります0。ブートストラップは12カラムベースです。 1行に12列が含まれていることを意味します。しかし、あなたは怒鳴るようなあなたのhtmlを変更する18.you必要性使用：

<div class="container"> 
    <div class="row"> 
    <ul> 
     <li class="col-md-3"> 
     <a href="#"> 
      <img src="http://placehold.it/255x200"> 
     </a> 
     <div> 
      <a href="#"> 
      <h4>Product name</h4> 
      <span>$220,90</span> 
      <span class="off"><b>$199,90</b></span> 
      <span class="info">by credit card</span> 
      </a> 
      <a href="#" class="btn btn-primary">Buy</a> 
     </div> 
     </li> 
     <li class="col-md-3"> 
     <a href="#"> 
      <img src="http://placehold.it/255x200"> 
     </a> 
     <div> 
      <a href="#"> 
      <h4>Product name</h4> 
      <span>$220,90</span> 
      <span class="off"><b>$199,90</b></span> 
      <span class="info">by credit card</span> 
      </a> 
      <a href="#" class="btn btn-primary">Buy</a> 
     </div> 
     </li> 
     <li class="col-md-3"> 
     <a href="#"> 
      <img src="http://placehold.it/255x200"> 
     </a> 
     <div> 
      <a href="#"> 
      <h4>Product name</h4> 
      <span>$220,90</span> 
      <span class="off"><b>$199,90</b></span> 
      <span class="info">by credit card</span> 
      </a> 
      <a href="#" class="btn btn-primary">Buy</a> 
     </div> 
     </li> 
     <li class="col-md-3"> 
     <a href="#"> 
      <img src="http://placehold.it/255x200"> 
     </a> 
     <div> 
      <a href="#"> 
      <h4>Product name</h4> 
      <span>$220,90</span> 
      <span class="off"><b>$199,90</b></span> 
      <span class="info">by credit card</span> 
      </a> 
      <a href="#" class="btn btn-primary">Buy</a> 
     </div> 
     </li> 
     </ul> 
     <ul> 
     <li class="col-md-3"> 
     <a href="#"> 
      <img src="http://placehold.it/255x200"> 
     </a> 
     <div> 
      <a href="#"> 
      <h4>Product name</h4> 
      <span>$220,90</span> 
      <span class="off"><b>$199,90</b></span> 
      <span class="info">by credit card</span> 
      </a> 
      <a href="#" class="btn btn-primary">Buy</a> 
     </div> 
     </li> 
     <li class="col-md-3"> 
     <a href="#"> 
      <img src="http://placehold.it/255x200"> 
     </a> 
     <div> 
      <a href="#"> 
      <h4>Product name</h4> 
      <span>$220,90</span> 
      <span class="off"><b>$199,90</b></span> 
      <span class="info">by credit card</span> 
      </a> 
      <a href="#" class="btn btn-primary">Buy</a> 
     </div> 
     </li> 
    </ul> 
    </div> 
</div>

出典

2017-05-05 16:47:07 Ashiquzzaman

ありがとう、私はbtnの前にdivに遷移（高さ）で表示できますか？ –

@RhianMolinari申し訳ありませんが、私は理解できません。/ – Ashiquzzaman

@RhianMolinari http://stackoverflow.com/questions/29420962/button-css-transition-does-not-work-inside-a-divからの助けを得ることができます。 – Ashiquzzaman

を.....この例のような、よりhttps://api.jquery.com/mouseover/

については

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function(){ 
 
     $("p").hover(function(){ 
 
      $(this).css("background-color", "green"); 
 
      }, function(){ 
 
      $(this).css("background-color", "pink"); 
 
     }); 
 
    }); 
 
    </script> 
 
    </head> 
 
    <body> 
 
    
 
    <p>Hover the mouse pointer over this paragraph.</p> 
 
    
 
    </body> 
 
    </html>

を実行します。

出典

2017-05-05 16:49:11 Gowthaman

CSSスケールの製品（カード）の上にマウスを置いてボタンを表示する

答えて

関連する問題