如何确保下拉框显示时光标下的CSS hover状态自动激活？

当包含带有hover样式链接的div从display:none切换为display:block时，如果鼠标指针正好落在某个链接上方，该链接的hover高亮状态不会自动触发，必须移动鼠标才会生效。我正在实现早期Macintosh风格的下拉列表：点击列表框时，下拉选项显示在列表上方，但点击后顶部选项要等鼠标移动才会高亮。

我之前尝试在显示dropdown-content时给第一个链接设置焦点来实现初始高亮，但问题是鼠标移到其他链接时，第一个链接仍保持高亮状态。

现有代码 #

JavaScript #

function openMenu(mybutton) {
    var els = document.getElementsByClassName("dropdown-content");
    var els1 = document.getElementsByClassName("dropdown");
    for(var i = 0; i < els1.length; i++) { // 遍历所有下拉元素
        if (els1[i] === mybutton) {
            els[i].classList.toggle("show");
        }
    }
}

CSS #

.dropdownContainer {
    border: 1px black solid;
    position:relative;
    width:150px;
}

.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position:absolute;
    top:-1px;
    left:-1px;
    width:150px;
    background-color: white;
    min-width: 120px;
    white-space: nowrap;
    z-index: 1;
    border: 1px #000 solid;
    border-bottom-width: 1px;
}

.dropdown-content a {
    float:none;
    color: black;
    padding: 4px 10px 4px 15px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover, .dropdown-content a:focus {
    background-color: black;
    color: white;
}

.show {
    display: block;
}

HTML #

<div class="dropdownContainer">
    <div onclick='openMenu(this);' class="dropdown">
        All Categories
    </div>
    <div class="dropdown-content">
        <a href="#">All Categories</a>
        <a href="#">Boards</a>
        <a href="#">Cables</a>
        <a href="#">Memory</a>
    </div>
</div>

解决方案 #

方法1：检测鼠标位置，手动触发高亮样式 #

先把hover样式抽离成独立的CSS类，显示菜单后检测鼠标坐标，给覆盖鼠标的链接添加该类，鼠标移动后再移除类让原生hover接管。

修改CSS

/* 抽离hover样式到独立类 */
.dropdown-content a:hover, 
.dropdown-content a:focus, 
.dropdown-content a.hover-active {
    background-color: black;
    color: white;
}

修改JavaScript

function openMenu(mybutton) {
    var els = document.getElementsByClassName("dropdown-content");
    var els1 = document.getElementsByClassName("dropdown");
    for(var i = 0; i < els1.length; i++) {
        if (els1[i] === mybutton) {
            const content = els[i];
            content.classList.toggle("show");
            
            // 菜单显示时检测鼠标位置
            if (content.classList.contains("show")) {
                const links = content.querySelectorAll('a');
                // 先清空所有链接的手动高亮类
                links.forEach(link => link.classList.remove('hover-active'));
                
                // 获取当前鼠标坐标
                const mousePos = {
                    x: event.clientX,
                    y: event.clientY
                };
                
                // 检查每个链接是否覆盖鼠标
                links.forEach(link => {
                    const rect = link.getBoundingClientRect();
                    if (mousePos.x >= rect.left && mousePos.x <= rect.right &&
                        mousePos.y >= rect.top && mousePos.y <= rect.bottom) {
                        link.classList.add('hover-active');
                    }
                });
            }
        }
    }
}

// 页面加载后给所有下拉链接绑定鼠标移动事件
document.addEventListener('DOMContentLoaded', () => {
    const allLinks = document.querySelectorAll('.dropdown-content a');
    allLinks.forEach(link => {
        link.addEventListener('mousemove', () => {
            link.classList.remove('hover-active');
        });
    });
});

方法2：优化焦点方案，避免残留高亮 #

之前的焦点问题是因为focus样式和hover样式重合，且链接不会自动失焦。可以通过调整CSS或添加事件来解决。

方案A：仅在键盘导航时显示焦点样式

修改CSS，用focus-visible替代focus，只有键盘聚焦时才显示高亮：

.dropdown-content a:hover {
    background-color: black;
    color: white;
}
/* 仅键盘聚焦时生效 */
.dropdown-content a:focus-visible {
    background-color: black;
    color: white;
}

方案B：鼠标移动时移除所有链接焦点

在JavaScript中添加事件，鼠标进入链接时清空所有链接的焦点：

document.addEventListener('DOMContentLoaded', () => {
    const allLinks = document.querySelectorAll('.dropdown-content a');
    allLinks.forEach(link => {
        link.addEventListener('mouseenter', () => {
            allLinks.forEach(l => l.blur());
        });
    });
});

同时在打开菜单时给第一个链接设置焦点：

function openMenu(mybutton) {
    var els = document.getElementsByClassName("dropdown-content");
    var els1 = document.getElementsByClassName("dropdown");
    for(var i = 0; i < els1.length; i++) {
        if (els1[i] === mybutton) {
            const content = els[i];
            content.classList.toggle("show");
            
            if (content.classList.contains("show")) {
                const firstLink = content.querySelector('a');
                firstLink.focus();
            }
        }
    }
}

方法3：强制浏览器重绘（兼容性一般） #

通过触发元素重绘，让浏览器重新评估hover状态，不过该方法在部分浏览器中可能因优化失效：

function openMenu(mybutton) {
    var els = document.getElementsByClassName("dropdown-content");
    var els1 = document.getElementsByClassName("dropdown");
    for(var i = 0; i < els1.length; i++) {
        if (els1[i] === mybutton) {
            const content = els[i];
            content.classList.toggle("show");
            
            if (content.classList.contains("show")) {
                // 强制触发重绘
                content.style.display = 'none';
                content.offsetHeight; // 强制浏览器计算布局
                content.style.display = 'block';
            }
        }
    }
}

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