如何在鼠标悬停某元素时，为另一元素设置显示延迟？

你的代码里transition不生效的核心原因是：display属性属于离散属性，它的取值（none/block/inline等）没有可计算的中间状态，CSS transition无法对这类属性的变化产生过渡效果。

下面提供几种可行的实现方式：

方法一：用opacity + visibility + transition实现延迟显示 #

通过opacity控制透明度（支持过渡），visibility控制元素是否可交互，配合transition-delay实现悬停后延迟显示的效果：

.sth {
    /* 默认隐藏：透明且不可交互 */
    opacity: 0;
    visibility: hidden;
    /* 隐藏时的过渡：先透明化，再隐藏visibility */
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.sthelse:hover + .sth {
    /* 悬停时显示：完全不透明且可交互 */
    opacity: 1;
    visibility: visible;
    /* 延迟2秒后开始过渡显示，visibility立即生效 */
    transition: opacity 0.3s ease 2s, visibility 0s;
}

方法二：用CSS Animation实现延迟显示 #

定义一个显示动画，通过animation-delay设置延迟时间：

.sth {
    opacity: 0;
    visibility: hidden;
}

.sthelse:hover + .sth {
    /* 延迟2秒后执行显示动画，动画结束后保持最终状态 */
    animation: showElement 0.3s ease 2s forwards;
}

@keyframes showElement {
    to {
        opacity: 1;
        visibility: visible;
    }
}

方法三：用JavaScript控制（适合必须用display的场景） #

如果业务场景要求必须使用display属性，可以通过定时器控制显示时机：

const triggerEl = document.querySelector('.sthelse');
const targetEl = document.querySelector('.sth');
let delayTimer = null;

// 鼠标进入时启动定时器，2秒后显示元素
triggerEl.addEventListener('mouseenter', () => {
    delayTimer = setTimeout(() => {
        targetEl.style.display = 'block';
    }, 2000);
});

// 鼠标离开时清除定时器，立即隐藏元素
triggerEl.addEventListener('mouseleave', () => {
    clearTimeout(delayTimer);
    targetEl.style.display = 'none';
});

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