我正在用PHP创建一个网上购物网站。我用bootstrap设计我的网站。我的问题是onmouseover显示添加购物车按钮和折扣图像。
这是我的代码
<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-->
我想你要找的是
.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>这不能在Php上完成，因为它是服务器端。我建议您尝试使用jQuery。这样做:
<script>
$(document).ready(function()
{
$("#mouseOverElement").mouseover(function()
{
$("#addToCartElement").fadeIn();
});
});
</script>
对于平稳过渡，这真的很棒。
.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 */
}