Jquery CSS框阴影过渡

我在我的网站上有几个div元素，它们属于一个具有插入框阴影的类。当我将鼠标悬停在这些div框上时，我希望将inset属性从框阴影中移除，并将其转换为向外的阴影。但是，尽管阴影可以正确更改，但在更改过程中它不会过渡。它只是瞬间切换阴影。我该如何解决这个问题

以下是HTML：

<header>

    <div id="header-stuff">

        <p class="header-big">Green Homes 101</p>

        <div id="header-links">

            <div class="header-link">
                <a href="alt-en.html#top">
                    <img src="images/index/alt-en.svg" alt="Alternate Energy" />
                    <p>Alternate Energy</p>
                </a>
            </div>

            <div class="header-link">
                <a href="diy.html#top">
                    <img src="images/index/diy.svg" alt="DIY" />
                    <p>DIY</p>
                </a>
            </div>

            <div class="header-link">
                <a href="buying.html#top">
                    <img src="images/index/buying.svg" alt="Buying Green Homes" />
                    <p>Buying Green Homes</p>
                </a>
            </div>

            <div class="header-link">
                <a href="about.html#top">
                    <img src="images/index/about.svg" alt="About Us" />
                    <p>About Us</p>
                </a>
            </div>

        </div>

    </div>

</header>

---

不能从普通长方体阴影过渡到插入长方体阴影

幸运的是，您可以设置多个长方体阴影，因此可以编写

.header-link {
    box-shadow:0 0 10px rgba(0, 0, 0, 0.7) inset, 0px 0px 0px white;
}

及

请注意，这些阴影与您的阴影相同，因为额外的阴影具有0px，因此不会显示。还请注意，顺序很重要：仅当第一个阴影在两个阴影中均为插入（或法线），第二个阴影在两个阴影中均为插入（或法线）时，浏览器才会对其进行转换，依此类推

---

我已经删除了悬停状态下的过渡，您不需要重复它们。

您可以在这里发布代码吗？似乎当您更改框阴影的样式时（从开始到插入-过渡不适用…但是，我建议使用-X，-Y像素值来“欺骗”用这种方式插入框和过渡，只是在框的阴影下玩-有帮助吗？

.header-link {
    box-shadow:0 0 10px rgba(0, 0, 0, 0.7) inset, 0px 0px 0px white;
}

.header-link:hover {
    box-shadow: 0px 0px 0px white inset, 0 0 10px rgba(0, 0, 0, 0.7);
}