使用JavaScript模拟mouse hover未触发元素hover样式，请求解决

嘿，我看了你的代码，发现问题很明确：你在模拟事件时，刚触发mousemove就立刻调用了mouseleave，这就相当于鼠标刚碰到元素瞬间就挪开了，CSS的:hover状态根本没机会维持，自然看不到背景变黄的效果。

CSS的:hover对应的是鼠标持续停留在元素上的状态，我们需要触发mouseenter（或者mouseover）来激活这个状态，而且不能立刻触发离开事件。下面是修复后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #chart:hover {
            background-color: yellow;
        }
    </style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart" onmousemove="showCoords(event)">This is a div</div>
<button>Button</button>
<script>
    $("button").click(function(){
        triggerMouseHover();
    });

    var triggerMouseHover = function(){
        function simulateMouseHover(x, y) {
            var el = document.elementFromPoint(x, y);
            if (!el) return; // 避免坐标处无元素的情况

            var fireMouseEvent = function (type, x, y) {
                var evt = document.createEvent("MouseEvents");
                evt.initMouseEvent(type, true, true, window, 1, 0, 0, x, y, false, false, false, false, 0, null);
                el.dispatchEvent(evt);
            };

            // 先触发mouseenter激活hover状态，再用mousemove模拟真实移动
            fireMouseEvent('mouseenter', x, y);
            fireMouseEvent('mousemove', x, y);
        };

        // 直接计算目标div的内部坐标，确保触发的是我们要的元素
        var chartEl = document.getElementById('chart');
        var rect = chartEl.getBoundingClientRect();
        var targetX = rect.left + Math.floor(Math.random() * rect.width);
        var targetY = rect.top + Math.floor(Math.random() * rect.height);
        
        simulateMouseHover(targetX, targetY);
    }

    function showCoords(event) {
        console.log ("X: " + event.clientX + " Y: " + event.clientY);
    }
</script>
</body>
</html>

额外优化点 #

• 精准触发目标元素：原来的随机坐标可能会落到div外面，我改成了直接计算div的位置，确保模拟的鼠标事件一定作用在#chart上
• 现代事件API替代：你用的MouseEvents是旧API，现在更推荐用PointerEvent，写法如下：

var fireMouseEvent = function (type, x, y) {
    var evt = new PointerEvent(type, {
        bubbles: true,
        cancelable: true,
        view: window,
        clientX: x,
        clientY: y
    });
    el.dispatchEvent(evt);
};

• 手动取消hover：如果之后需要取消元素的hover状态，只需要在合适的时机触发mouseleave事件即可。

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