javascript - onmouseover 显示添加购物车按钮和折扣图像

Question

我正在使用 PHP 创建在线购物网站。我正在使用 Bootstrap 来设计我的网站。我的问题是鼠标悬停显示添加购物车按钮和折扣图片。

这是我的代码

<div class="col-xs-18 col-sm-6 col-md-3" style="text-align:center; min-height:380px;">
  <div class="thumbnail">
    <img src="images/<?php echo $p_img;?>.jpg" alt="products"  />
    <div class="caption">
      <p style="font-size:11px;"><?php echo $p_name;?></p>
      <p style="font-size:17px;"><b><i class="fa fa-inr"></i> <?php echo $p_price;?></b></p>

    </div>
 </div><!--thumbnail end-->
</div><!--col-xs-18 col-sm-6 col-md-4  end--> 

Answer 1

我想你要找的是

.thumbnail .caption {
  display: none;
}
.thumbnail:hover .caption {
  display: block;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">

<div class="row">
  <div class="col-xs-18 col-sm-6 col-md-3" style="text-align:center; min-height:380px;">
    <div class="thumbnail">
      <img src="//placehold.it/64X64" alt="products"  />
      <div class="caption">
        <p style="font-size:11px;">Name</p>
        <p style="font-size:17px;"><b><i class="fa fa-inr"></i> Price</b></p>                
      </div>
    </div><!--thumbnail end-->
  </div>
</div>