Question

使用PHP创建在线购物网站。我使用bootstrap设计我的网站。我的问题是onmouseover show添加购物车按钮和折扣图片。

这是我的代码

<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

我认为你在寻找的是

Views

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

Answer 2

这不能在Php上完成，因为它是服务器端。我建议您尝试使用jQuery。这样做：

<script>
$(document).ready(function()
{
$("#mouseOverElement").mouseover(function()
{
$("#addToCartElement").fadeIn();
});
});
</script>

Answer 3

对于平稳过渡，这确实很棒。

  .img-container {
        position: relative;
        overflow: hidden; 
/* this will hide the overflow that will be happening in translate(100%,100%)*/
      }

    .cart-btn {
        transition: all 1s ease-in-out;
        transform: translate(100%, 100%); 
/* this will put the cart-button away from the image */
    }

    .img-container:hover .cart-btn {
        transform: translate(0, 0); 
/* when hover, now the element is shown in their original position */ 
      }

onmouseover show添加购物车按钮和折扣图像

3 个答案: