CSS Transition鼠标悬停后异常：边框显示逻辑错误求助

问题描述 #

制作了一个采用flex布局（align-items:center、justify-content:space-between）的头部导航，包含若干链接与企业logo。为链接添加了CSS Transition效果，需求为鼠标悬停时显示链接四边边框，离开时隐藏，但当前鼠标离开时边框反而开始显示，该过渡效果失效；文字翻转的过渡效果正常。

问题原因 #

• 初始边框颜色与页面背景色（#000）一致，视觉上默认隐藏，但hover时切换为白色，离开时切回黑色，配合hover时才出现的伪元素覆盖，导致离开时伪元素消失后边框才“显现”，造成反向视觉效果。
• 伪元素仅在hover状态下定义样式，无初始状态，无法实现平滑过渡，hover时突然出现、离开时突然消失，打乱了过渡逻辑。
• 全局过渡属性未精准指定，可能引发不必要的属性过渡冲突。

修复方案 #

修改后的CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #000;
}

/* 核心修改：调整初始边框状态、添加伪元素默认样式、精准过渡属性 */
.menu a {
    padding: 10px;
    color: #fff;
    border: 2px solid transparent; /* 默认透明边框 */
    position: relative; /* 为伪元素提供定位基准 */
    transition: border-color 0.3s ease; /* 仅过渡边框颜色 */
}

.menu a:hover {
    border-color: #fff; /* hover时显示白色边框 */
}

/* 伪元素初始状态：缩放0、透明 */
.menu a:before,
.menu a:after {
    content: '';
    position: absolute;
    background: #000;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    z-index: 0; /* 置于文字下方，避免遮挡 */
}

.menu a:before {
    top: 6px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% - 12px);
    transform: scaleY(0);
}

.menu a:after {
    top: -2px;
    left: 6px;
    height: calc(100% + 4px);
    width: calc(100% - 12px);
    transform: scaleX(0);
}

/* hover时伪元素显示 */
.menu a:hover:before {
    transform: scaleY(1);
    opacity: 1;
}

.menu a:hover:after {
    transform: scaleX(1);
    opacity: 1;
}

.menu a div:nth-child(1) {
    z-index: 1;
    position: relative;
}

.menu a div:nth-child(2) {
    z-index: 1;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 5%;
}

.header-container .logo {
    width: 50px;
    height: 50px;
}

.header-container .logo a {
    width: 100%;
    height: 100%;
    display: block;
}

.header-container .logo img {
    width: 100%;
    height: 100%;
}

.menu {
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    display: flex;
    align-items: center;
}

.menu .menu-item:not(:last-child) {
    margin-right: 20px
}

.menu-item {
    position: relative;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
}

.menu-item-text {
    position: relative;
    pointer-events: none;
    display: block;
    line-height: 1;
    font-size: 2rem
}

.menu-item>div:nth-child(1) span {
    will-change: transform;
    transform-style: preserve-3d;
    transition: 0.5s;
    transition-delay: calc(0.05s * var(--index));
    transform-origin: bottom;
    display: inline-block;
}

.menu-item>div:nth-child(2) span {
    will-change: transform;
    transform-style: preserve-3d;
    transition: 0.5s;
    transition-delay: calc(0.05s * var(--index));
    transform-origin: top;
    display: inline-block;
    transform: translate3d(0, 100%, 0) rotateX(-90deg);
}

.menu-item:hover>div:nth-child(1) span {
    transform: translate3d(0, -100%, 0) rotateX(-90deg);
}

.menu-item:hover>div:nth-child(2) span {
    transform: translate3d(0, 0%, 0) rotateX(0deg);
}

span {
    font-size: 1vw;
}

关键修改说明 #

1. 边框初始状态改为透明：border:2px solid transparent，hover时切换为#fff，实现从无到有的平滑过渡，离开时透明隐藏。
2. 伪元素添加默认状态：设置transform:scaleY(0)/scaleX(0)和opacity:0，hover时恢复正常，实现伪元素的平滑显示/隐藏。
3. 精准指定过渡属性：分别为边框和伪元素指定过渡属性，避免全局过渡带来的冲突，同时调整过渡时长为更合理的0.3s（可根据需求修改）。
4. 添加定位基准：给.menu a设置position:relative，确保伪元素定位正确。
5. 调整伪元素层级：设置z-index:0，避免遮挡上方的文字内容。

保留的HTML和JS代码 #

HTML

<div class="header-container">
    <div class="logo">
        <a href="#">
            <img src="../img/logo.png" alt="Company Logo">
        </a>
    </div>
    <nav class="menu">
        <a href="home.php" class="menu-item">
            <div>
                <span class="menu-item-text">Home</span>
            </div>
        </a>
        <a href="#" class="menu-item">
            <div>
                <span class="menu-item-text">Services</span>
            </div>
        </a>
        <a href="#" class="menu-item">
            <div>
                <span class="menu-item-text">Start&nbsp; a &nbsp; Project</span>
            </div>
        </a>
        <a href="#" class="menu-item">
            <div>
                <span class="menu-item-text">Projects</span>
            </div>
        </a>
        <a href="#" class="menu-item">
            <div>
                <span class="menu-item-text">About Us</span>
            </div>
        </a>
    </nav>
</div>

JS

const menuItems = [...document.querySelectorAll('.menu-item')];

menuItems.forEach(item => {
    let word = item.children[0].children[0].innerText.split('');
    item.children[0].innerHTML = '';
    word.forEach((letter, idx) => {
        item.children[0].innerHTML += `<span style="--index: ${idx};">${letter}</span>`;
    })
    let cloneDiv = item.children[0].cloneNode(true);
    cloneDiv.style.position = 'absolute';
    cloneDiv.style.left = '0';
    cloneDiv.style.top = '0';
    cloneDiv.style.padding = '10px';
    item.appendChild(cloneDiv)
});

内容的提问来源于stack exchange，提问作者shivani srivastav