onmouseover显示添加购物车按钮和折扣图像
onmouseover显示添加购物车按钮和折扣图像
提问于 2015-07-31 06:41:07
我正在创建一个使用PHP的在线购物网站。我正在使用引导来设计我的网站。我的问题是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--> 回答 3
Stack Overflow用户
回答已采纳
发布于 2015-07-31 06:56:26
我想你要找的是
.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>
Stack Overflow用户
发布于 2015-07-31 06:53:48
这不能在Php上完成，因为它是服务器端。为此，我建议您尝试使用jQuery。这样做吧：
<script>
$(document).ready(function()
{
$("#mouseOverElement").mouseover(function()
{
$("#addToCartElement").fadeIn();
});
});
</script>Stack Overflow用户
发布于 2019-02-26 09:19:29
对于平稳过渡来说，这真是太棒了。
.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 */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31739617
复制相关文章
相似问题
腾讯云开发者
