如何解决如何为包含尚未显示的元素的div创建框阴影?
我有一个容器A,其中有2个div。第一个div B只是一个静态对象。第二个div C的位置是绝对位置,将出现在A的悬停上。
问题是:我希望我的整个容器在悬停后有一个盒子阴影。而且它仍然只会在静态div B上显示阴影,而不会在C上显示阴影。
我尝试在B和C上制作两个单独的阴影,但是如果这样-那么一个阴影将覆盖另一个阴影,看起来并不酷... 我附上了图片的外观以及目前的外观。
我无法正确显示代码,因为它使用了Bootstrap,而且我不知道如何在这里使它工作。但是有:
<div class='product' style="margin: auto;">
<div class='visible'>
<div class='product-img' style='height: 60%;'>
<img src=".$imgSource.">
</div>
<div class='product-info' style='height: 40%;'>
<!--
-----THIS PART DOES NOT MATTER-----
<div class='product-brand'>
<p>.$cat['designer'].</p>
</div>
<div class='product-name'>
<p>.$cat['description']. .$cat['title'].</p>
</div>
<div class='product-price'>
<p>от .$lowest_price.</p>
</div>
-->
</div>
</div>
<div class='invisible-prices'>
<div class='product-price-invisible d-flex'>
<!--
-----THIS PART DOES NOT MATTER-----
<div class='actual-price'>
price
</div>
<div class='actual-price green-price'>
price
</div>
<div class='look-up-button'>
<a href=".$link." target='_blank'><button type = 'button' class = 'btn btn-success btn-success-custom'>посмотреть ></button></a>
</div>
-->
</div>
</div>
<div>
以及一些重要的CSS: 重要提示---我未包含html注释部分中使用的css代码
.product .visible{
width: 14rem;
padding: 1rem;
padding-bottom: 0;
text-align: center;
}
.product .invisible-prices {
position: absolute;
display: none;
height: auto;
width: 14rem;
padding: 1rem;
text-align: center;
}
.product .invisible-prices .product-price-invisible {
padding-bottom: 1rem;
max-width: 100%;
}
.product:hover {
box-shadow: -1px -1px 8px 5px rgba(150,150,0.363);
}
.product:hover .invisible-prices {
display: block;
box-shadow: -1px -1px 8px 5px rgba(150,0.363);
background-color: white;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。