如何为包含尚未显示的元素的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 (将#修改为@）

html position